/************ TABLE OF CONTENTS ***************
-----------------
01. THEME CSS
-----------------
1.1 Common Classes
1.2 init style
-----------------
02. COMPONENTS css
-----------------
2.1 Animations
2.2 Back to top
2.3 Breadcrumb
2.4 Buttons
2.5 instagram
2.6 Nice Select
2.7 offcanvas
2.8 Pagination
2.9 Preloader
2.10 Search css start
2.11 Section Title
2.12 spacing
-----------------
03. HEADER CSS
-----------------
3.1 Header Style 1
---------------------------------
04. MENU CSS
---------------------------------
4.1 Main menu css
4.2 Mobilemenu css
---------------------------------
05. BLOG CSS
---------------------------------
5.1 blog start
5.2 Postbox css
5.3 Sidebar css
---------------------------------
06. FOOTER CSS
---------------------------------
6.1 Footer Style 1
---------------------------------
07. PAGES CSS
---------------------------------
7.1 about start
7.2 banner start
7.3 benifits start
7.4 brand start
7.5 pricing start
7.6 contact start
7.7 counter start
7.8 cta start
7.9 error start
7.10 faq start
7.11 feature start
7.12 Hero css start
7.13 industry start
7.14 join start
7.15 policy start
7.16 pricing start
7.17 progress start
7.18 progress start
7.19 project start
7.20 service start
7.21 success start
7.22 team start
7.23 industry start
7.24 video start
**********************************************/
/*----------------------------------------*/
/* 1.1 Theme Default
/*----------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet');
.back-to-top-wrapper,
a,
button,
p,
input,
select,
textarea,
li,
.transition-3 {
-webkit-transition: all 0.3s 0s ease-out;
-moz-transition: all 0.3s 0s ease-out;
-ms-transition: all 0.3s 0s ease-out;
-o-transition: all 0.3s 0s ease-out;
transition: all 0.3s 0s ease-out;
}
/* transform */
:root {
/**
@font family declaration
*/
--tp-ff-body: 'DM Sans', sans-serif;
--tp-ff-heading: 'DM Serif Display', serif;
--tp-ff-dm: 'DM Serif Display', serif;
--tp-ff-p: 'DM Sans', sans-serif;
--tp-ff-fontawesome: "Font Awesome 6 Pro";
/**
@color declaration
*/
--tp-common-white: #fff;
--tp-common-black: #000;
--tp-common-white-2: #f6f6f6;
--tp-common-yellow: #fdc93a;
--tp-grey-1: #506767;
--tp-grey-2: #354c4c;
--tp-grey-3: #e5ebea;
--tp-grey-4: #f3f4f4;
--tp-theme-primary: #00499B;
--tp-theme-secondary: #188DA1;
--tp-border-1: rgba(31, 49, 48, 0.1);
--tp-border-2: rgba(31, 49, 48, 0.12);
--tp-border-3: rgba(255, 255, 255, 0.55);
--tp-border-4: rgba(255, 255, 255, 0.6);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*---------------------------------
typography css start
---------------------------------*/
body {
font-family: var(--tp-ff-body);
font-size: 16px;
font-weight: normal;
color: var(--tp-theme-primary);
line-height: 26px;
}
a {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--tp-ff-body);
color: var(--tp-common-black);
margin-top: 0px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
-webkit-transition: color 0.3s 0s ease-out;
-moz-transition: color 0.3s 0s ease-out;
-ms-transition: color 0.3s 0s ease-out;
-o-transition: color 0.3s 0s ease-out;
transition: color 0.3s 0s ease-out;
}
h1 {
font-size: 70px;
}
h2 {
font-size: 50px;
}
h3 {
font-size: 38x;
}
h4 {
font-size: 26px;
}
h5 {
font-size: 20px;
}
h6 {
font-size: 16px;
}
ul {
margin: 0px;
padding: 0px;
}
p {
font-family: var(--tp-ff-p);
color: var(--tp-grey-1);
font-weight: 400;
font-size: 16px;
line-height: 26px;
margin-bottom: 15px;
}
img {
max-width: 100%;
}
a:not([href]):not([class]),
a:not([href]):not([class]):hover {
color: inherit;
text-decoration: none;
}
a:focus,
.button:focus {
text-decoration: none;
outline: none;
}
a:focus,
a:hover {
color: inherit;
text-decoration: none;
}
a,
button {
color: inherit;
outline: none;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
button:focus {
outline: 0;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
input[type=text],
input[type=email],
input[type=tel],
input[type=number],
input[type=password],
input[type=url],
textarea {
outline: none;
background-color: #fff;
height: 52px;
width: 100%;
line-height: 52px;
font-size: 16px;
color: var(--tp-theme-primary);
padding-left: 25px;
padding-right: 25px;
border-radius: 4px;
border: 1px solid var(--tp-common-white);
}
input[type=text]::-webkit-input-placeholder,
input[type=email]::-webkit-input-placeholder,
input[type=tel]::-webkit-input-placeholder,
input[type=number]::-webkit-input-placeholder,
input[type=password]::-webkit-input-placeholder,
input[type=url]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: var(--tp-grey-2);
opacity:0.5;
}
input[type=text]::-moz-placeholder,
input[type=email]::-moz-placeholder,
input[type=tel]::-moz-placeholder,
input[type=number]::-moz-placeholder,
input[type=password]::-moz-placeholder,
input[type=url]::-moz-placeholder,
textarea::-moz-placeholder {
/* Firefox 19+ */
color: var(--tp-grey-2);
}
input[type=text]:-moz-placeholder,
input[type=email]:-moz-placeholder,
input[type=tel]:-moz-placeholder,
input[type=number]:-moz-placeholder,
input[type=password]:-moz-placeholder,
input[type=url]:-moz-placeholder,
textarea:-moz-placeholder {
/* Firefox 4-18 */
color: var(--tp-grey-2);
}
input[type=text]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
input[type=tel]:-ms-input-placeholder,
input[type=number]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=url]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
/* IE 10+ Edge*/
color: var(--tp-grey-2);
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=tel]::placeholder,
input[type=number]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
textarea::placeholder {
/* MODERN BROWSER */
color: var(--tp-grey-2);
}
[dir=rtl] input[type=text],
[dir=rtl] input[type=email],
[dir=rtl] input[type=tel],
[dir=rtl] input[type=number],
[dir=rtl] input[type=password],
[dir=rtl] input[type=url],
[dir=rtl] textarea {
text-align: right;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=tel]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=url]:focus,
textarea:focus {
border-color: var(--tp-theme-primary);
}
input[type=text]:focus::placeholder,
input[type=email]:focus::placeholder,
input[type=tel]:focus::placeholder,
input[type=number]:focus::placeholder,
input[type=password]:focus::placeholder,
input[type=url]:focus::placeholder,
textarea:focus::placeholder {
opacity: 0;
}
textarea {
line-height: 1.4;
padding-top: 17px;
padding-bottom: 17px;
}
input[type=color] {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: none;
border: 0;
cursor: pointer;
height: 100%;
width: 100%;
padding: 0;
border-radius: 50%;
}
*::-moz-selection {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
text-shadow: none;
}
::-moz-selection {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
text-shadow: none;
}
::selection {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
text-shadow: none;
}
*::-moz-placeholder {
color: var(--tp-theme-primary);
font-size: 14px;
opacity: 1;
}
*::placeholder {
color: var(--tp-theme-primary);
font-size: 14px;
opacity: 1;
}
.z-index {
z-index: 1;
}
.z-index-2 {
z-index: 2;
}
.z-index-3 {
z-index: 3;
}
.z-index-4 {
z-index: 4;
}
.z-index-5 {
z-index: 5;
}
.z-index-6 {
z-index: 6;
}
.z-index-7 {
z-index: 7;
}
.z-index-8 {
z-index: 8;
}
.gx-10 {
--bs-gutter-x: 10px;
}
.gx-15 {
--bs-gutter-x: 15px;
}
.gx-20 {
--bs-gutter-x: 20px;
}
.gx-23 {
--bs-gutter-x: 23px;
}
.gx-25 {
--bs-gutter-x: 25px;
}
.gx-30 {
--bs-gutter-x: 30px;
}
.gx-35 {
--bs-gutter-x: 35px;
}
.gx-40 {
--bs-gutter-x: 40px;
}
.gx-45 {
--bs-gutter-x: 45px;
}
.gx-50 {
--bs-gutter-x: 50px;
}
.gx-60 {
--bs-gutter-x: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.gx-60 {
--bs-gutter-x: 30px;
}
}
.gx-90 {
--bs-gutter-x: 90px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.gx-90 {
--bs-gutter-x: 50px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.gx-90 {
--bs-gutter-x: 30px;
}
}
/*---------------------------------
1.1 Common Classes
---------------------------------*/
.w-img img {
width: 100%;
}
.m-img img {
max-width: 100%;
}
.hover-text-white:hover {
color: var(--tp-common-white);
}
.fix {
overflow: hidden;
}
.clear {
clear: both;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
}
.z-index-3 {
z-index: 3;
}
.z-index-4 {
z-index: 4;
}
.z-index-5 {
z-index: 5;
}
.z-index-6 {
z-index: 6;
}
.z-index-7 {
z-index: 7;
}
.z-index-8 {
z-index: 8;
}
.z-index-9 {
z-index: 9;
}
.z-index-10 {
z-index: 10;
}
.z-index-m-1 {
z-index: -1;
}
.z-index-m-1 {
z-index: -1;
}
.overflow-y-visible {
overflow-x: hidden;
overflow-y: visible;
}
.p-relative {
position: relative;
}
.p-absolute {
position: absolute;
}
.p-inherit {
position: inherit !important;
}
.bg-position {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* gutter for x axis */
.gx-10 {
--bs-gutter-x: 10px;
}
.tp-gx-20 {
--bs-gutter-x: 20px;
}
.tp-transfrom {
transform: translateY(-1px) !important;
}
.tp-transfrom-2 {
transform: translateY(-2px);
}
.tp-transfrom-3 {
transform: translateY(-3px);
}
.tp-transfrom-4 {
transform: translateY(-4px);
}
.tp-round-4 {
border-radius: 4px;
}
.tp-round-24 {
border-radius: 26px;
}
.tp-round-26 {
border-radius: 26px;
}
.tp-round-36 {
border-radius: 36px;
}
.lh-0 {
line-height: 0;
}
.lh-22 {
line-height: 22px;
}
.lh-24 {
line-height: 24px;
}
.lh-28 {
line-height: 28px;
}
.lh-30 {
line-height: 30px;
}
.lh-32 {
line-height: 32px;
}
.lh-34 {
line-height: 34px;
}
.lh-36 {
line-height: 36px;
}
.lh-38 {
line-height: 38px;
}
.lh-110-per {
line-height: 1.1;
}
.ls-0 {
letter-spacing: 0;
}
.ls-1 {
letter-spacing: 0.01em;
}
.ls-m-1 {
letter-spacing: -0.01em;
}
.ls-m-2 {
letter-spacing: -0.02em;
}
.ls-m-3 {
letter-spacing: -0.03em;
}
.ls-m-4 {
letter-spacing: -0.04em;
}
.border-full-1 {
border: 1px solid var(--tp-border-1);
}
.border-full-white {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tp-border-bottom {
border-bottom: 1px solid var(--tp-border-1);
}
.text-italic {
font-style: italic;
}
.underline-black {
background-image: linear-gradient(#1f3130, #1f3130), linear-gradient(#1f3130, #1f3130);
background-size: 0 1px, 0 1px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s linear;
-webkit-transition: all 0.4s ease 0.3s 0s ease-out;
-moz-transition: all 0.4s ease 0.3s 0s ease-out;
-ms-transition: all 0.4s ease 0.3s 0s ease-out;
-o-transition: all 0.4s ease 0.3s 0s ease-out;
transition: all 0.4s ease 0.3s 0s ease-out;
}
.underline-black:hover {
/*background-image: linear-gradient(#1f3130, #1f3130), linear-gradient(#1f3130, #1f3130);*/
/*background-size: 0 1px, 100% 1px;*/
/*background-position: 100% 100%, 0 100%;*/
color: #fff;
background-repeat: no-repeat;
transition: background-size 0.3s linear;
-webkit-transition: all 0.4s ease 0.3s 0s ease-out;
-moz-transition: all 0.4s ease 0.3s 0s ease-out;
-ms-transition: all 0.4s ease 0.3s 0s ease-out;
-o-transition: all 0.4s ease 0.3s 0s ease-out;
transition: all 0.4s ease 0.3s 0s ease-out;
}
.underline-white {
background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
background-size: 0 1px, 0 1px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s linear;
-webkit-transition: all 0.4s ease 0.3s 0s ease-out;
-moz-transition: all 0.4s ease 0.3s 0s ease-out;
-ms-transition: all 0.4s ease 0.3s 0s ease-out;
-o-transition: all 0.4s ease 0.3s 0s ease-out;
transition: all 0.4s ease 0.3s 0s ease-out;
}
.underline-white:hover {
background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
background-size: 0 1px, 100% 1px;
background-position: 100% 100%, 0 100%;
background-repeat: no-repeat;
transition: background-size 0.3s linear;
-webkit-transition: all 0.4s ease 0.3s 0s ease-out;
-moz-transition: all 0.4s ease 0.3s 0s ease-out;
-ms-transition: all 0.4s ease 0.3s 0s ease-out;
-o-transition: all 0.4s ease 0.3s 0s ease-out;
transition: all 0.4s ease 0.3s 0s ease-out;
}
.hover-text-secondary:hover {
color: var(--tp-theme-secondary);
}
.hover-text-primary:hover {
color: var(--tp-theme-primary);
}
.hover-bg-primary:hover {
background: var(--tp-theme-primary);
}
.hover-bg-secondary:hover {
background: var(--tp-theme-secondary);
}
.hover-bg-white:hover {
background: var(--tp-common-white-2);
}
.tp-transparent {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 3;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.br br {
display: none;
}
}
.slide-transtion {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
/*---------------------------------
1.2 init style
---------------------------------*/
@media (min-width: 1400px) {
.container-1690 {
max-width: 1690px;
}
}
@media (min-width: 1400px) {
.container-1780 {
max-width: 1780px;
}
}
@media (min-width: 1400px) {
.container-1765 {
max-width: 1765px;
}
}
/* Font weight */
.fw-100 {
font-weight: 100;
}
.fw-200 {
font-weight: 200;
}
.fw-300 {
font-weight: 300;
}
.fw-400 {
font-weight: 400;
}
.fw-500 {
font-weight: 500;
}
.fw-600 {
font-weight: 600;
}
.fw-700 {
font-weight: 700;
}
.fw-800 {
font-weight: 800;
}
.fw-900 {
font-weight: 900;
}
/* Font size */
.fs-12 {
font-size: 12px;
}
.fs-13 {
font-size: 13px;
}
.fs-14 {
font-size: 14px;
}
.fs-15 {
font-size: 15px;
}
.fs-16 {
font-size: 16px;
}
.fs-17 {
font-size: 17px;
}
.fs-18 {
font-size: 18px;
}
.fs-19 {
font-size: 19px;
}
.fs-20 {
font-size: 20px;
}
.fs-21 {
font-size: 21px;
}
.fs-22 {
font-size: 22px;
}
.fs-23 {
font-size: 23px;
}
.fs-24 {
font-size: 24px;
}
.fs-25 {
font-size: 25px;
}
.fs-26 {
font-size: 26px;
}
.fs-27 {
font-size: 27px;
}
.fs-28 {
font-size: 28px;
}
.fs-29 {
font-size: 29px;
}
.fs-30 {
font-size: 30px;
}
.fs-31 {
font-size: 31px;
}
.fs-32 {
font-size: 32px;
}
.fs-33 {
font-size: 33px;
}
.fs-34 {
font-size: 34px;
}
.fs-35 {
font-size: 35px;
}
.fs-36 {
font-size: 36px;
}
.fs-37 {
font-size: 37px;
}
.fs-38 {
font-size: 38px;
}
.fs-39 {
font-size: 39px;
}
.fs-40 {
font-size: 40px;
}
.fs-41 {
font-size: 41px;
}
.fs-42 {
font-size: 42px;
}
.fs-43 {
font-size: 43px;
}
.fs-44 {
font-size: 44px;
}
.fs-45 {
font-size: 45px;
}
.fs-46 {
font-size: 46px;
}
.fs-47 {
font-size: 47px;
}
.fs-48 {
font-size: 48px;
}
.fs-49 {
font-size: 49px;
}
.fs-50 {
font-size: 50px;
}
.fs-51 {
font-size: 51px;
}
.fs-52 {
font-size: 52px;
}
.fs-53 {
font-size: 53px;
}
.fs-54 {
font-size: 54px;
}
.fs-55 {
font-size: 55px;
}
.fs-56 {
font-size: 56px;
}
.fs-57 {
font-size: 57px;
}
.fs-58 {
font-size: 58px;
}
.fs-59 {
font-size: 59px;
}
.fs-60 {
font-size: 60px;
}
.fs-61 {
font-size: 61px;
}
.fs-62 {
font-size: 62px;
}
.fs-63 {
font-size: 63px;
}
.fs-64 {
font-size: 64px;
}
.fs-65 {
font-size: 65px;
}
.fs-66 {
font-size: 66px;
}
.fs-67 {
font-size: 67px;
}
.fs-68 {
font-size: 68px;
}
.fs-69 {
font-size: 69px;
}
.fs-70 {
font-size: 70px;
}
.fs-71 {
font-size: 71px;
}
.fs-72 {
font-size: 72px;
}
.fs-73 {
font-size: 73px;
}
.fs-74 {
font-size: 74px;
}
.fs-75 {
font-size: 75px;
}
.fs-76 {
font-size: 76px;
}
.fs-77 {
font-size: 77px;
}
.fs-78 {
font-size: 78px;
}
.fs-79 {
font-size: 79px;
}
.fs-80 {
font-size: 80px;
}
.fs-81 {
font-size: 81px;
}
.fs-82 {
font-size: 82px;
}
.fs-83 {
font-size: 83px;
}
.fs-84 {
font-size: 84px;
}
.fs-85 {
font-size: 85px;
}
.fs-86 {
font-size: 86px;
}
.fs-87 {
font-size: 87px;
}
.fs-88 {
font-size: 88px;
}
.fs-89 {
font-size: 89px;
}
.fs-90 {
font-size: 90px;
}
.fs-91 {
font-size: 91px;
}
.fs-92 {
font-size: 92px;
}
.fs-93 {
font-size: 93px;
}
.fs-94 {
font-size: 94px;
}
.fs-95 {
font-size: 95px;
}
.fs-96 {
font-size: 96px;
}
.fs-97 {
font-size: 97px;
}
.fs-98 {
font-size: 98px;
}
.fs-99 {
font-size: 99px;
}
.fs-100 {
font-size: 100px;
}
/* Font size media query */
@media (max-width: 1399.98px) {
.fs-xl-12 {
font-size: 12px;
}
.fs-xl-13 {
font-size: 13px;
}
.fs-xl-14 {
font-size: 14px;
}
.fs-xl-15 {
font-size: 15px;
}
.fs-xl-16 {
font-size: 16px;
}
.fs-xl-17 {
font-size: 17px;
}
.fs-xl-18 {
font-size: 18px;
}
.fs-xl-19 {
font-size: 19px;
}
.fs-xl-20 {
font-size: 20px;
}
.fs-xl-21 {
font-size: 21px;
}
.fs-xl-22 {
font-size: 22px;
}
.fs-xl-23 {
font-size: 23px;
}
.fs-xl-24 {
font-size: 24px;
}
.fs-xl-25 {
font-size: 25px;
}
.fs-xl-26 {
font-size: 26px;
}
.fs-xl-27 {
font-size: 27px;
}
.fs-xl-28 {
font-size: 28px;
}
.fs-xl-29 {
font-size: 29px;
}
.fs-xl-30 {
font-size: 30px;
}
.fs-xl-31 {
font-size: 31px;
}
.fs-xl-32 {
font-size: 32px;
}
.fs-xl-33 {
font-size: 33px;
}
.fs-xl-34 {
font-size: 34px;
}
.fs-xl-35 {
font-size: 35px;
}
.fs-xl-36 {
font-size: 36px;
}
.fs-xl-37 {
font-size: 37px;
}
.fs-xl-38 {
font-size: 38px;
}
.fs-xl-39 {
font-size: 39px;
}
.fs-xl-40 {
font-size: 40px;
}
.fs-xl-41 {
font-size: 41px;
}
.fs-xl-42 {
font-size: 42px;
}
.fs-xl-43 {
font-size: 43px;
}
.fs-xl-44 {
font-size: 44px;
}
.fs-xl-45 {
font-size: 45px;
}
.fs-xl-46 {
font-size: 46px;
}
.fs-xl-47 {
font-size: 47px;
}
.fs-xl-48 {
font-size: 48px;
}
.fs-xl-49 {
font-size: 49px;
}
.fs-xl-50 {
font-size: 50px;
}
.fs-xl-51 {
font-size: 51px;
}
.fs-xl-52 {
font-size: 52px;
}
.fs-xl-53 {
font-size: 53px;
}
.fs-xl-54 {
font-size: 54px;
}
.fs-xl-55 {
font-size: 55px;
}
.fs-xl-56 {
font-size: 56px;
}
.fs-xl-57 {
font-size: 57px;
}
.fs-xl-58 {
font-size: 58px;
}
.fs-xl-59 {
font-size: 59px;
}
.fs-xl-60 {
font-size: 60px;
}
.fs-xl-61 {
font-size: 61px;
}
.fs-xl-62 {
font-size: 62px;
}
.fs-xl-63 {
font-size: 63px;
}
.fs-xl-64 {
font-size: 64px;
}
.fs-xl-65 {
font-size: 65px;
}
.fs-xl-66 {
font-size: 66px;
}
.fs-xl-67 {
font-size: 67px;
}
.fs-xl-68 {
font-size: 68px;
}
.fs-xl-69 {
font-size: 69px;
}
.fs-xl-70 {
font-size: 70px;
}
.fs-xl-71 {
font-size: 71px;
}
.fs-xl-72 {
font-size: 72px;
}
.fs-xl-73 {
font-size: 73px;
}
.fs-xl-74 {
font-size: 74px;
}
.fs-xl-75 {
font-size: 75px;
}
.fs-xl-76 {
font-size: 76px;
}
.fs-xl-77 {
font-size: 77px;
}
.fs-xl-78 {
font-size: 78px;
}
.fs-xl-79 {
font-size: 79px;
}
.fs-xl-80 {
font-size: 80px;
}
.fs-xl-81 {
font-size: 81px;
}
.fs-xl-82 {
font-size: 82px;
}
.fs-xl-83 {
font-size: 83px;
}
.fs-xl-84 {
font-size: 84px;
}
.fs-xl-85 {
font-size: 85px;
}
.fs-xl-86 {
font-size: 86px;
}
.fs-xl-87 {
font-size: 87px;
}
.fs-xl-88 {
font-size: 88px;
}
.fs-xl-89 {
font-size: 89px;
}
.fs-xl-90 {
font-size: 90px;
}
.fs-xl-91 {
font-size: 91px;
}
.fs-xl-92 {
font-size: 92px;
}
.fs-xl-93 {
font-size: 93px;
}
.fs-xl-94 {
font-size: 94px;
}
.fs-xl-95 {
font-size: 95px;
}
.fs-xl-96 {
font-size: 96px;
}
.fs-xl-97 {
font-size: 97px;
}
.fs-xl-98 {
font-size: 98px;
}
.fs-xl-99 {
font-size: 99px;
}
.fs-xl-100 {
font-size: 100px;
}
}
/* Font size media query */
@media (max-width: 1199.98px) {
.fs-lg-12 {
font-size: 12px;
}
.fs-lg-13 {
font-size: 13px;
}
.fs-lg-14 {
font-size: 14px;
}
.fs-lg-15 {
font-size: 15px;
}
.fs-lg-16 {
font-size: 16px;
}
.fs-lg-17 {
font-size: 17px;
}
.fs-lg-18 {
font-size: 18px;
}
.fs-lg-19 {
font-size: 19px;
}
.fs-lg-20 {
font-size: 20px;
}
.fs-lg-21 {
font-size: 21px;
}
.fs-lg-22 {
font-size: 22px;
}
.fs-lg-23 {
font-size: 23px;
}
.fs-lg-24 {
font-size: 24px;
}
.fs-lg-25 {
font-size: 25px;
}
.fs-lg-26 {
font-size: 26px;
}
.fs-lg-27 {
font-size: 27px;
}
.fs-lg-28 {
font-size: 28px;
}
.fs-lg-29 {
font-size: 29px;
}
.fs-lg-30 {
font-size: 30px;
}
.fs-lg-31 {
font-size: 31px;
}
.fs-lg-32 {
font-size: 32px;
}
.fs-lg-33 {
font-size: 33px;
}
.fs-lg-34 {
font-size: 34px;
}
.fs-lg-35 {
font-size: 35px;
}
.fs-lg-36 {
font-size: 36px;
}
.fs-lg-37 {
font-size: 37px;
}
.fs-lg-38 {
font-size: 38px;
}
.fs-lg-39 {
font-size: 39px;
}
.fs-lg-40 {
font-size: 40px;
}
.fs-lg-41 {
font-size: 41px;
}
.fs-lg-42 {
font-size: 42px;
}
.fs-lg-43 {
font-size: 43px;
}
.fs-lg-44 {
font-size: 44px;
}
.fs-lg-45 {
font-size: 45px;
}
.fs-lg-46 {
font-size: 46px;
}
.fs-lg-47 {
font-size: 47px;
}
.fs-lg-48 {
font-size: 48px;
}
.fs-lg-49 {
font-size: 49px;
}
.fs-lg-50 {
font-size: 50px;
}
.fs-lg-51 {
font-size: 51px;
}
.fs-lg-52 {
font-size: 52px;
}
.fs-lg-53 {
font-size: 53px;
}
.fs-lg-54 {
font-size: 54px;
}
.fs-lg-55 {
font-size: 55px;
}
.fs-lg-56 {
font-size: 56px;
}
.fs-lg-57 {
font-size: 57px;
}
.fs-lg-58 {
font-size: 58px;
}
.fs-lg-59 {
font-size: 59px;
}
.fs-lg-60 {
font-size: 60px;
}
.fs-lg-61 {
font-size: 61px;
}
.fs-lg-62 {
font-size: 62px;
}
.fs-lg-63 {
font-size: 63px;
}
.fs-lg-64 {
font-size: 64px;
}
.fs-lg-65 {
font-size: 65px;
}
.fs-lg-66 {
font-size: 66px;
}
.fs-lg-67 {
font-size: 67px;
}
.fs-lg-68 {
font-size: 68px;
}
.fs-lg-69 {
font-size: 69px;
}
.fs-lg-70 {
font-size: 70px;
}
.fs-lg-71 {
font-size: 71px;
}
.fs-lg-72 {
font-size: 72px;
}
.fs-lg-73 {
font-size: 73px;
}
.fs-lg-74 {
font-size: 74px;
}
.fs-lg-75 {
font-size: 75px;
}
.fs-lg-76 {
font-size: 76px;
}
.fs-lg-77 {
font-size: 77px;
}
.fs-lg-78 {
font-size: 78px;
}
.fs-lg-79 {
font-size: 79px;
}
.fs-lg-80 {
font-size: 80px;
}
.fs-lg-81 {
font-size: 81px;
}
.fs-lg-82 {
font-size: 82px;
}
.fs-lg-83 {
font-size: 83px;
}
.fs-lg-84 {
font-size: 84px;
}
.fs-lg-85 {
font-size: 85px;
}
.fs-lg-86 {
font-size: 86px;
}
.fs-lg-87 {
font-size: 87px;
}
.fs-lg-88 {
font-size: 88px;
}
.fs-lg-89 {
font-size: 89px;
}
.fs-lg-90 {
font-size: 90px;
}
.fs-lg-91 {
font-size: 91px;
}
.fs-lg-92 {
font-size: 92px;
}
.fs-lg-93 {
font-size: 93px;
}
.fs-lg-94 {
font-size: 94px;
}
.fs-lg-95 {
font-size: 95px;
}
.fs-lg-96 {
font-size: 96px;
}
.fs-lg-97 {
font-size: 97px;
}
.fs-lg-98 {
font-size: 98px;
}
.fs-lg-99 {
font-size: 99px;
}
.fs-lg-100 {
font-size: 100px;
}
}
@media (max-width: 991.98px) {
.fs-md-12 {
font-size: 12px;
}
.fs-md-13 {
font-size: 13px;
}
.fs-md-14 {
font-size: 14px;
}
.fs-md-15 {
font-size: 15px;
}
.fs-md-16 {
font-size: 16px;
}
.fs-md-17 {
font-size: 17px;
}
.fs-md-18 {
font-size: 18px;
}
.fs-md-19 {
font-size: 19px;
}
.fs-md-20 {
font-size: 20px;
}
.fs-md-21 {
font-size: 21px;
}
.fs-md-22 {
font-size: 22px;
}
.fs-md-23 {
font-size: 23px;
}
.fs-md-24 {
font-size: 24px;
}
.fs-md-25 {
font-size: 25px;
}
.fs-md-26 {
font-size: 26px;
}
.fs-md-27 {
font-size: 27px;
}
.fs-md-28 {
font-size: 28px;
}
.fs-md-29 {
font-size: 29px;
}
.fs-md-30 {
font-size: 30px;
}
.fs-md-31 {
font-size: 31px;
}
.fs-md-32 {
font-size: 32px;
}
.fs-md-33 {
font-size: 33px;
}
.fs-md-34 {
font-size: 34px;
}
.fs-md-35 {
font-size: 35px;
}
.fs-md-36 {
font-size: 36px;
}
.fs-md-37 {
font-size: 37px;
}
.fs-md-38 {
font-size: 38px;
}
.fs-md-39 {
font-size: 39px;
}
.fs-md-40 {
font-size: 40px;
}
.fs-md-41 {
font-size: 41px;
}
.fs-md-42 {
font-size: 42px;
}
.fs-md-43 {
font-size: 43px;
}
.fs-md-44 {
font-size: 44px;
}
.fs-md-45 {
font-size: 45px;
}
.fs-md-46 {
font-size: 46px;
}
.fs-md-47 {
font-size: 47px;
}
.fs-md-48 {
font-size: 48px;
}
.fs-md-49 {
font-size: 49px;
}
.fs-md-50 {
font-size: 50px;
}
.fs-md-51 {
font-size: 51px;
}
.fs-md-52 {
font-size: 52px;
}
.fs-md-53 {
font-size: 53px;
}
.fs-md-54 {
font-size: 54px;
}
.fs-md-55 {
font-size: 55px;
}
.fs-md-56 {
font-size: 56px;
}
.fs-md-57 {
font-size: 57px;
}
.fs-md-58 {
font-size: 58px;
}
.fs-md-59 {
font-size: 59px;
}
.fs-md-60 {
font-size: 60px;
}
.fs-md-61 {
font-size: 61px;
}
.fs-md-62 {
font-size: 62px;
}
.fs-md-63 {
font-size: 63px;
}
.fs-md-64 {
font-size: 64px;
}
.fs-md-65 {
font-size: 65px;
}
.fs-md-66 {
font-size: 66px;
}
.fs-md-67 {
font-size: 67px;
}
.fs-md-68 {
font-size: 68px;
}
.fs-md-69 {
font-size: 69px;
}
.fs-md-70 {
font-size: 70px;
}
.fs-md-71 {
font-size: 71px;
}
.fs-md-72 {
font-size: 72px;
}
.fs-md-73 {
font-size: 73px;
}
.fs-md-74 {
font-size: 74px;
}
.fs-md-75 {
font-size: 75px;
}
.fs-md-76 {
font-size: 76px;
}
.fs-md-77 {
font-size: 77px;
}
.fs-md-78 {
font-size: 78px;
}
.fs-md-79 {
font-size: 79px;
}
.fs-md-80 {
font-size: 80px;
}
.fs-md-81 {
font-size: 81px;
}
.fs-md-82 {
font-size: 82px;
}
.fs-md-83 {
font-size: 83px;
}
.fs-md-84 {
font-size: 84px;
}
.fs-md-85 {
font-size: 85px;
}
.fs-md-86 {
font-size: 86px;
}
.fs-md-87 {
font-size: 87px;
}
.fs-md-88 {
font-size: 88px;
}
.fs-md-89 {
font-size: 89px;
}
.fs-md-90 {
font-size: 90px;
}
.fs-md-91 {
font-size: 91px;
}
.fs-md-92 {
font-size: 92px;
}
.fs-md-93 {
font-size: 93px;
}
.fs-md-94 {
font-size: 94px;
}
.fs-md-95 {
font-size: 95px;
}
.fs-md-96 {
font-size: 96px;
}
.fs-md-97 {
font-size: 97px;
}
.fs-md-98 {
font-size: 98px;
}
.fs-md-99 {
font-size: 99px;
}
.fs-md-100 {
font-size: 100px;
}
}
@media (max-width: 767.98px) {
.fs-sm-12 {
font-size: 12px;
}
.fs-sm-13 {
font-size: 13px;
}
.fs-sm-14 {
font-size: 14px;
}
.fs-sm-15 {
font-size: 15px;
}
.fs-sm-16 {
font-size: 16px;
}
.fs-sm-17 {
font-size: 17px;
}
.fs-sm-18 {
font-size: 18px;
}
.fs-sm-19 {
font-size: 19px;
}
.fs-sm-20 {
font-size: 20px;
}
.fs-sm-21 {
font-size: 21px;
}
.fs-sm-22 {
font-size: 22px;
}
.fs-sm-23 {
font-size: 23px;
}
.fs-sm-24 {
font-size: 24px;
}
.fs-sm-25 {
font-size: 25px;
}
.fs-sm-26 {
font-size: 26px;
}
.fs-sm-27 {
font-size: 27px;
}
.fs-sm-28 {
font-size: 28px;
}
.fs-sm-29 {
font-size: 29px;
}
.fs-sm-30 {
font-size: 30px;
}
.fs-sm-31 {
font-size: 31px;
}
.fs-sm-32 {
font-size: 32px;
}
.fs-sm-33 {
font-size: 33px;
}
.fs-sm-34 {
font-size: 34px;
}
.fs-sm-35 {
font-size: 35px;
}
.fs-sm-36 {
font-size: 36px;
}
.fs-sm-37 {
font-size: 37px;
}
.fs-sm-38 {
font-size: 38px;
}
.fs-sm-39 {
font-size: 39px;
}
.fs-sm-40 {
font-size: 35px;
}
.fs-sm-41 {
font-size: 41px;
}
.fs-sm-42 {
font-size: 42px;
}
.fs-sm-43 {
font-size: 43px;
}
.fs-sm-44 {
font-size: 44px;
}
.fs-sm-45 {
font-size: 45px;
}
.fs-sm-46 {
font-size: 46px;
}
.fs-sm-47 {
font-size: 47px;
}
.fs-sm-48 {
font-size: 48px;
}
.fs-sm-49 {
font-size: 49px;
}
.fs-sm-50 {
font-size: 50px;
}
.fs-sm-51 {
font-size: 51px;
}
.fs-sm-52 {
font-size: 52px;
}
.fs-sm-53 {
font-size: 53px;
}
.fs-sm-54 {
font-size: 54px;
}
.fs-sm-55 {
font-size: 55px;
}
.fs-sm-56 {
font-size: 56px;
}
.fs-sm-57 {
font-size: 57px;
}
.fs-sm-58 {
font-size: 58px;
}
.fs-sm-59 {
font-size: 59px;
}
.fs-sm-60 {
font-size: 60px;
}
.fs-sm-61 {
font-size: 61px;
}
.fs-sm-62 {
font-size: 62px;
}
.fs-sm-63 {
font-size: 63px;
}
.fs-sm-64 {
font-size: 64px;
}
.fs-sm-65 {
font-size: 65px;
}
.fs-sm-66 {
font-size: 66px;
}
.fs-sm-67 {
font-size: 67px;
}
.fs-sm-68 {
font-size: 68px;
}
.fs-sm-69 {
font-size: 69px;
}
.fs-sm-70 {
font-size: 70px;
}
.fs-sm-71 {
font-size: 71px;
}
.fs-sm-72 {
font-size: 72px;
}
.fs-sm-73 {
font-size: 73px;
}
.fs-sm-74 {
font-size: 74px;
}
.fs-sm-75 {
font-size: 75px;
}
.fs-sm-76 {
font-size: 76px;
}
.fs-sm-77 {
font-size: 77px;
}
.fs-sm-78 {
font-size: 78px;
}
.fs-sm-79 {
font-size: 79px;
}
.fs-sm-80 {
font-size: 80px;
}
.fs-sm-81 {
font-size: 81px;
}
.fs-sm-82 {
font-size: 82px;
}
.fs-sm-83 {
font-size: 83px;
}
.fs-sm-84 {
font-size: 84px;
}
.fs-sm-85 {
font-size: 85px;
}
.fs-sm-86 {
font-size: 86px;
}
.fs-sm-87 {
font-size: 87px;
}
.fs-sm-88 {
font-size: 88px;
}
.fs-sm-89 {
font-size: 89px;
}
.fs-sm-90 {
font-size: 90px;
}
.fs-sm-91 {
font-size: 91px;
}
.fs-sm-92 {
font-size: 92px;
}
.fs-sm-93 {
font-size: 93px;
}
.fs-sm-94 {
font-size: 94px;
}
.fs-sm-95 {
font-size: 95px;
}
.fs-sm-96 {
font-size: 96px;
}
.fs-sm-97 {
font-size: 97px;
}
.fs-sm-98 {
font-size: 98px;
}
.fs-sm-99 {
font-size: 99px;
}
.fs-sm-100 {
font-size: 100px;
}
}
@media (max-width: 575.98px) {
.fs-xs-12 {
font-size: 12px;
}
.fs-xs-13 {
font-size: 13px;
}
.fs-xs-14 {
font-size: 14px;
}
.fs-xs-15 {
font-size: 15px;
}
.fs-xs-16 {
font-size: 16px;
}
.fs-xs-17 {
font-size: 17px;
}
.fs-xs-18 {
font-size: 18px;
}
.fs-xs-19 {
font-size: 19px;
}
.fs-xs-20 {
font-size: 20px;
}
.fs-xs-21 {
font-size: 21px;
}
.fs-xs-22 {
font-size: 22px;
}
.fs-xs-23 {
font-size: 23px;
}
.fs-xs-24 {
font-size: 24px;
}
.fs-xs-25 {
font-size: 25px;
}
.fs-xs-26 {
font-size: 26px;
}
.fs-xs-27 {
font-size: 27px;
}
.fs-xs-28 {
font-size: 28px;
}
.fs-xs-29 {
font-size: 29px;
}
.fs-xs-30 {
font-size: 30px;
}
.fs-xs-31 {
font-size: 31px;
}
.fs-xs-32 {
font-size: 32px;
}
.fs-xs-33 {
font-size: 33px;
}
.fs-xs-34 {
font-size: 34px;
}
.fs-xs-35 {
font-size: 35px;
}
.fs-xs-36 {
font-size: 36px;
}
.fs-xs-37 {
font-size: 37px;
}
.fs-xs-38 {
font-size: 38px;
}
.fs-xs-39 {
font-size: 39px;
}
.fs-xs-40 {
font-size: 40px;
}
.fs-xs-41 {
font-size: 41px;
}
.fs-xs-42 {
font-size: 42px;
}
.fs-xs-43 {
font-size: 43px;
}
.fs-xs-44 {
font-size: 44px;
}
.fs-xs-45 {
font-size: 45px;
}
.fs-xs-46 {
font-size: 46px;
}
.fs-xs-47 {
font-size: 47px;
}
.fs-xs-48 {
font-size: 48px;
}
.fs-xs-49 {
font-size: 49px;
}
.fs-xs-50 {
font-size: 50px;
}
.fs-xs-51 {
font-size: 51px;
}
.fs-xs-52 {
font-size: 52px;
}
.fs-xs-53 {
font-size: 53px;
}
.fs-xs-54 {
font-size: 54px;
}
.fs-xs-55 {
font-size: 55px;
}
.fs-xs-56 {
font-size: 56px;
}
.fs-xs-57 {
font-size: 57px;
}
.fs-xs-58 {
font-size: 58px;
}
.fs-xs-59 {
font-size: 59px;
}
.fs-xs-60 {
font-size: 60px;
}
.fs-xs-61 {
font-size: 61px;
}
.fs-xs-62 {
font-size: 62px;
}
.fs-xs-63 {
font-size: 63px;
}
.fs-xs-64 {
font-size: 64px;
}
.fs-xs-65 {
font-size: 65px;
}
.fs-xs-66 {
font-size: 66px;
}
.fs-xs-67 {
font-size: 67px;
}
.fs-xs-68 {
font-size: 68px;
}
.fs-xs-69 {
font-size: 69px;
}
.fs-xs-70 {
font-size: 70px;
}
.fs-xs-71 {
font-size: 71px;
}
.fs-xs-72 {
font-size: 72px;
}
.fs-xs-73 {
font-size: 73px;
}
.fs-xs-74 {
font-size: 74px;
}
.fs-xs-75 {
font-size: 75px;
}
.fs-xs-76 {
font-size: 76px;
}
.fs-xs-77 {
font-size: 77px;
}
.fs-xs-78 {
font-size: 78px;
}
.fs-xs-79 {
font-size: 79px;
}
.fs-xs-80 {
font-size: 80px;
}
.fs-xs-81 {
font-size: 81px;
}
.fs-xs-82 {
font-size: 82px;
}
.fs-xs-83 {
font-size: 83px;
}
.fs-xs-84 {
font-size: 84px;
}
.fs-xs-85 {
font-size: 85px;
}
.fs-xs-86 {
font-size: 86px;
}
.fs-xs-87 {
font-size: 87px;
}
.fs-xs-88 {
font-size: 88px;
}
.fs-xs-89 {
font-size: 89px;
}
.fs-xs-90 {
font-size: 90px;
}
.fs-xs-91 {
font-size: 91px;
}
.fs-xs-92 {
font-size: 92px;
}
.fs-xs-93 {
font-size: 93px;
}
.fs-xs-94 {
font-size: 94px;
}
.fs-xs-95 {
font-size: 95px;
}
.fs-xs-96 {
font-size: 96px;
}
.fs-xs-97 {
font-size: 97px;
}
.fs-xs-98 {
font-size: 98px;
}
.fs-xs-99 {
font-size: 99px;
}
.fs-xs-100 {
font-size: 100px;
}
}
.tp-text-common-white {
color: var(--tp-common-white);
}
.tp-bg-common-white {
background-color: var(--tp-common-white);
}
.tp-text-common-black {
color: var(--tp-common-black);
}
.tp-bg-common-black {
background-color: var(--tp-common-black);
}
.tp-text-common-white-2 {
color: var(--tp-common-white-2);
}
.tp-bg-common-white-2 {
background-color: var(--tp-common-white-2);
}
.tp-text-common-yellow {
color: var(--tp-common-yellow);
}
.tp-bg-common-yellow {
background-color: var(--tp-common-yellow);
}
.tp-text-grey-1 {
color: var(--tp-grey-1);
}
.tp-bg-grey-1 {
background-color: var(--tp-grey-1);
}
.tp-text-grey-2 {
color: var(--tp-grey-2);
}
.tp-bg-grey-2 {
background-color: var(--tp-grey-2);
}
.tp-text-grey-3 {
color: var(--tp-grey-3);
}
.tp-bg-grey-3 {
background-color: var(--tp-grey-3);
}
.tp-text-grey-4 {
color: var(--tp-grey-4);
}
.tp-bg-grey-4 {
background-color: var(--tp-grey-4);
}
.tp-text-theme-primary {
color: var(--tp-theme-primary);
}
.tp-bg-theme-primary {
background-color: var(--tp-theme-primary);
}
.tp-text-theme-secondary {
color: var(--tp-theme-secondary);
}
.tp-bg-theme-secondary {
background-color: var(--tp-theme-secondary);
}
.tp-text-border-1 {
color: var(--tp-border-1);
}
.tp-bg-border-1 {
background-color: var(--tp-border-1);
}
.tp-text-border-2 {
color: var(--tp-border-2);
}
.tp-bg-border-2 {
background-color: var(--tp-border-2);
}
.tp-text-border-3 {
color: var(--tp-border-3);
}
.tp-bg-border-3 {
background-color: var(--tp-border-3);
}
.tp-text-border-4 {
color: var(--tp-border-4);
}
.tp-bg-border-4 {
background-color: var(--tp-border-4);
}
.tp-ff-body {
font-family: var(--tp-ff-body);
}
.tp-ff-heading {
font-family: var(--tp-ff-heading);
}
.tp-ff-dm {
font-family: var(--tp-ff-dm);
}
.tp-ff-p {
font-family: var(--tp-ff-p);
}
.tp-ff-fontawesome {
font-family: var(--tp-ff-fontawesome);
}
/*----------------------------------------*/
/* 2.2 Back to top
/*----------------------------------------*/
.back-to-top-wrapper {
position: fixed;
right: 50px;
bottom: 0;
height: 44px;
width: 44px;
cursor: pointer;
display: block;
border-radius: 50%;
z-index: 99;
opacity: 0;
visibility: hidden;
}
@media (max-width: 574.98px) {
.back-to-top-wrapper {
right: 20px;
bottom: 20px;
}
}
.back-to-top-wrapper.back-to-top-btn-show {
visibility: visible;
opacity: 1;
bottom: 50px;
}
.back-to-top-btn {
display: inline-block;
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
background: var(--tp-theme-secondary);
box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3);
color: var(--tp-common-white);
border-radius: 50%;
-webkit-transition: all 0.3s 0s ease-out;
-moz-transition: all 0.3s 0s ease-out;
-ms-transition: all 0.3s 0s ease-out;
-o-transition: all 0.3s 0s ease-out;
transition: all 0.3s 0s ease-out;
}
.back-to-top-btn svg {
-webkit-transform: translateY(-2px);
-moz-transform: translateY(-2px);
-ms-transform: translateY(-2px);
-o-transform: translateY(-2px);
transform: translateY(-2px);
}
.back-to-top-btn:hover {
-webkit-transform: translateY(-4px);
-moz-transform: translateY(-4px);
-ms-transform: translateY(-4px);
-o-transform: translateY(-4px);
transform: translateY(-4px);
}
/*----------------------------------------*/
/* 2.4 Buttons
/*----------------------------------------*/
.tp-btn-xs {
padding: 8px 10px;
}
.tp-btn-md {
padding: 13px 28px;
}
.tp-btn-lg {
padding: 16px 27px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-btn-lg {
padding: 16px 22px;
}
}
.tp-btn-xl {
padding: 18px 38px;
}
.tp-btn-xxl {
padding: 23px 38px;
}
.tp-btn-switch-animation {
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tp-btn-switch-animation .btn-text {
margin-left: -13px;
position: relative;
z-index: 3;
transition: transform 0.6s 125ms cubic-bezier(0.1, 0.75, 0.25, 1);
}
.tp-btn-switch-animation .btn-icon {
margin-left: 6px;
position: relative;
transition: opacity 0.4s 0.25s, transform 0.6s 0.25s;
transition-timing-function: cubic-bezier(0.1, 0.75, 0.25, 1);
line-height: 0;
z-index: 3;
}
.tp-btn-switch-animation .btn-icon+.btn-icon {
order: -2;
opacity: 0;
transition-delay: 0s;
margin-left: 0;
-webkit-transform: translateX(-10px);
transform: translateX(-10px);
}
.tp-btn-switch-animation:hover .btn-text {
transition-delay: 0.1s;
transform: translateX(23px);
}
.tp-btn-switch-animation:hover .btn-icon {
transition-delay: 0s;
transform: translateX(10px);
opacity: 0;
}
.tp-btn-switch-animation:hover .btn-icon+.btn-icon {
opacity: 1;
transform: translateX(0);
transition-delay: 225ms;
}
.tp-btn-switch-text>span {
display: inline-flex;
align-items: center;
position: relative;
overflow: hidden;
}
.tp-btn-switch-text.btn-lg>span {
padding: 15px 31px;
}
.tp-btn-switch-text .btn-double-text {
transition: opacity 0.65s, transform 0.85s;
transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1);
position: relative;
}
.tp-btn-switch-text .btn-double-text::before {
content: attr(data-text);
display: inline-block;
position: absolute;
white-space: nowrap;
top: 50%;
opacity: 0;
left: 50%;
transform: translate(-50%, 100%);
transition: opacity 0.5s, transform 0.8s;
transition-timing-function: cubic-bezier(0.15, 0.85, 0.31, 1);
}
.tp-btn-switch-text:hover.bg-hover-black {
background: var(--tp-common-black-4);
}
.tp-btn-switch-text:hover.bg-hover-theme-1 {
background: var(--tp-theme-1);
}
.tp-btn-switch-text:hover .btn-double-text {
transform: translateY(-200%);
}
.tp-btn-switch-text:hover .btn-double-text::before {
transform: translate(-50%, 150%);
opacity: 1;
}
.tp-btn-border {
border: 1px solid rgba(255, 255, 255, 0.25);
}
.tp-arrow-angle {
--qode-hover-move-x: 110%;
--qode-hover-move-y: 100%;
}
.tp-arrow-svg-top-right {
fill: currentColor;
stroke: none;
}
.tp-arrow-angle path {
transition: transform 0.38s cubic-bezier(0.37, 0.08, 0.02, 0.93), opacity 0.18s ease-out;
}
.tp-arrow-angle path:nth-of-type(1) {
transform: translateX(0) translateY(0);
opacity: 1;
transition-delay: 0.15s, 0.15s;
}
.tp-arrow-angle path:nth-of-type(2) {
transform: translateX(calc(-1 * var(--qode-hover-move-x))) translateY(var(--qode-hover-move-y));
opacity: 0.5;
transition-delay: 0s, 0s;
}
.tp-left-right:hover .tp-arrow-angle path:nth-of-type(2) {
transform: translateX(0) translateY(0);
opacity: 1;
transition-delay: 0.15s, 0.15s;
}
.tp-left-right:hover .tp-arrow-angle path:nth-of-type(1) {
transform: translateX(var(--qode-hover-move-x)) translateY(calc(-1 * var(--qode-hover-move-y)));
opacity: 0;
transition-delay: 0s, 0s;
}
/*----------------------------------------*/
/* 2.1 Animations
/*----------------------------------------*/
/* zoom effect animation */
@keyframes zoom {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
/* animate-pulse */
@keyframes animate-pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 0 0 rgba(255, 255, 255, 0.8);
}
40% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.8);
}
80% {
box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0);
}
}
@keyframes slide-progress {
0% {
transform: translateX(-100%);
width: 0;
}
100% {
transform: translateX(0);
width: 100%;
}
}
@-webkit-keyframes tpshake {
10% {
transform: translateY(-10px);
}
50% {
transform: skew(15deg);
}
80% {
transform: rotate(10deg);
}
100% {
transform: translate(0);
}
}
@-moz-keyframes tpshake {
10% {
transform: translateY(-10px);
}
50% {
transform: skew(15deg);
}
80% {
transform: rotate(10deg);
}
100% {
transform: translate(0);
}
}
@-ms-keyframes tpshake {
10% {
transform: translateY(-10px);
}
50% {
transform: skew(15deg);
}
80% {
transform: rotate(10deg);
}
100% {
transform: translate(0);
}
}
@keyframes tpshake {
10% {
transform: translateY(-10px);
}
50% {
transform: skew(15deg);
}
80% {
transform: rotate(10deg);
}
100% {
transform: translate(0);
}
}
.tpshake {
transition: all 0.4s ease;
}
.tpshake-wrap:hover .tpshake {
animation-name: tpshake;
animation-timing-function: ease-in-out;
animation-duration: 0.4s;
animation-iteration-count: 1;
}
@keyframes wobble_vertical {
16.65% {
transform: translateY(8px);
}
33.3% {
transform: translateY(-6px);
}
49.95% {
transform: translateY(4px);
}
66.6% {
transform: translateY(-2px);
}
83.25% {
transform: translateY(1px);
}
100% {
transform: translateY(0);
}
}
.tpshake-wrap-2:hover .tpshake-2 {
animation-name: wobble_vertical;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
}
@-webkit-keyframes rotate-infinite {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes rotate-infinite {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-ms-keyframes rotate-infinite {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate-infinite {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.rotate-infinite {
-webkit-animation: rotate-infinite 15s linear infinite;
animation: rotate-infinite 15s linear infinite;
}
/*img-animation**********************/
.img-custom-anim-right {
animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
opacity: 0;
}
@keyframes img-anim-right {
0% {
transform: translateX(5%);
clip-path: inset(0 0 0 100%);
opacity: 0;
}
100% {
transform: translateX(0);
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
.img-custom-anim-left {
animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
opacity: 0;
}
@keyframes img-anim-left {
0% {
transform: translateX(-5%);
clip-path: inset(0 100% 0 0);
opacity: 0;
}
100% {
transform: translateX(0);
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
.img-custom-anim-top {
animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
opacity: 0;
}
@keyframes img-anim-top {
0% {
transform: translateY(-5%);
clip-path: inset(0 0 100% 0);
opacity: 0;
}
100% {
transform: translateY(0);
clip-path: inset(0 0 0 0);
opacity: 1;
}
}
@-webkit-keyframes tpSwing {
0% {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
100% {
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
transform: rotate(-6deg);
}
}
@-moz-keyframes tpSwing {
0% {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
100% {
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
transform: rotate(-6deg);
}
}
@-ms-keyframes tpSwing {
0% {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
100% {
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
transform: rotate(-6deg);
}
}
@keyframes tpSwing {
0% {
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
100% {
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
transform: rotate(-6deg);
}
}
.tpswing {
animation: tpSwing 2s linear infinite alternate;
}
@keyframes tptranslateX2 {
0% {
transform: translateX(-30px);
}
to {
transform: translateX(20px);
}
}
.tptranslateX2 {
animation: tptranslateX2 4s infinite alternate;
}
@keyframes tptranslateY2 {
0% {
transform: translateY(-30px);
}
to {
transform: translateY(20px);
}
}
.tptranslateY2 {
animation: tptranslateY2 4s infinite alternate forwards;
}
@keyframes headerSlideDown {
0% {
margin-top: -150px;
}
100% {
margin-top: 0;
}
}
/*----------------------------------------*/
/* 2.9 Preloader
/*----------------------------------------*/
.preloader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: var(--tp-theme-primary);
}
/* HTML: */
.loading {
width: 60px;
aspect-ratio: 2;
--_g: no-repeat radial-gradient(circle closest-side, #f8d0b3 90%, #0000);
background: var(--_g) 0% 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
background-size: 33.3333333333% 50%;
animation: l3 1s infinite linear;
}
@keyframes l3 {
20% {
background-position: 0% 0%, 50% 50%, 100% 50%;
}
40% {
background-position: 0% 100%, 50% 0%, 100% 50%;
}
60% {
background-position: 0% 50%, 50% 100%, 100% 0%;
}
80% {
background-position: 0% 50%, 50% 50%, 100% 100%;
}
}
/*----------------------------------------*/
/* 2.6 Nice Select
/*----------------------------------------*/
.nice-select {
-webkit-tap-highlight-color: transparent;
background-color: #fff;
border-radius: 5px;
border: solid 1px #e8e8e8;
box-sizing: border-box;
clear: both;
cursor: pointer;
display: block;
float: left;
font-family: inherit;
font-size: 14px;
font-weight: normal;
height: 60px;
line-height: 60px;
outline: none;
padding-left: 18px;
padding-right: 30px;
position: relative;
text-align: left !important;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
width: auto;
}
.nice-select:hover {
border-color: #dbdbdb;
}
.nice-select:active,
.nice-select.open,
.nice-select:focus {
border-color: #999;
}
.nice-select::after {
position: absolute;
content: "\f107";
top: 50%;
right: 30px;
font-family: var(--tp-ff-fontawesome);
color: var(--tp-common-black);
font-weight: 500;
pointer-events: none;
-webkit-transition: all 0.15s ease-in-out;
transition: all 0.15s ease-in-out;
margin-top: 0;
transform-origin: center;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.nice-select.open::after {
-webkit-transform: translateY(-50%) rotate(-180deg);
-moz-transform: translateY(-50%) rotate(-180deg);
-ms-transform: translateY(-50%) rotate(-180deg);
-o-transform: translateY(-50%) rotate(-180deg);
transform: translateY(-50%) rotate(-180deg);
}
.nice-select.open .list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.nice-select.disabled {
border-color: #ededed;
color: #999;
pointer-events: none;
}
.nice-select.disabled::after {
border-color: #cccccc;
}
.nice-select.wide {
width: 100%;
}
.nice-select.wide .list {
left: 0 !important;
right: 0 !important;
}
.nice-select.right {
float: right;
}
.nice-select.right .list {
left: auto;
right: 0;
}
.nice-select.small {
font-size: 12px;
height: 36px;
line-height: 34px;
}
.nice-select.small::after {
height: 4px;
width: 4px;
}
.nice-select.small .option {
line-height: 34px;
min-height: 34px;
}
.nice-select .list {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
box-sizing: border-box;
margin-top: 4px;
opacity: 0;
overflow: hidden;
padding: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 0;
-webkit-transform-origin: 50% 0;
-ms-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform: scale(0.75) translateY(-21px);
-ms-transform: scale(0.75) translateY(-21px);
transform: scale(0.75) translateY(-21px);
-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
z-index: 9;
}
.nice-select .option {
cursor: pointer;
font-weight: 400;
line-height: 40px;
list-style: none;
min-height: 40px;
outline: none;
padding-left: 18px;
padding-right: 29px;
text-align: left;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nice-select .option.selected {
font-weight: bold;
}
.nice-select .option.disabled {
background-color: transparent;
color: #999;
cursor: default;
}
.no-csspointerevents .nice-select .list {
display: none;
}
.no-csspointerevents .nice-select.open .list {
display: block;
}
/*----------------------------------------*/
/* 2.8 Pagination
/*----------------------------------------*/
.tp-pagination-wrap nav ul {
display: flex;
justify-content: center;
}
.tp-pagination-wrap nav ul li {
list-style: none;
}
.tp-pagination-wrap nav ul li a {
font-weight: 500;
font-size: 16px;
border-radius: 4px;
padding: 8px 16px;
color: #506767;
border: 1px solid rgba(31, 49, 48, 0.1);
margin: 3px 3px;
display: inline-block;
width: 44px;
height: 44px;
}
.tp-pagination-wrap nav ul li a:hover {
box-shadow: 0 1px 3px 0 rgba(32, 33, 36, 0.08);
background: var(--tp-common-white);
border-color: var(--tp-common-white);
}
.tp-pagination-wrap nav ul li a.text {
font-weight: 600;
font-size: 16px;
color: #1f3130;
width: auto;
height: auto;
}
/*----------------------------------------*/
/* 2.7 offcanvas
/*----------------------------------------*/
.body-overlay {
position: fixed;
top: 0;
left: 0;
z-index: 995;
width: 100%;
height: 100%;
background-color: rgba(31, 49, 48, 0.8);
visibility: hidden;
opacity: 0;
transition: 0.45s ease-in-out;
}
.body-overlay.apply {
opacity: 1;
visibility: visible;
}
.body-overlay:hover {
cursor: url(../img/cross-icon/cross-out.png), pointer;
}
.tpoffcanvas {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: fixed;
top: 0;
right: -100%;
width: 480px;
bottom: 0;
box-shadow: 0 16px -32px 0 rgba(0, 0, 0, 0.8);
background-color: var(--tp-common-white);
z-index: 997;
padding: 50px;
scrollbar-width: none;
opacity: 0;
visibility: hidden;
transition: 0.45s ease-in-out;
overflow-y: scroll;
}
.tpoffcanvas .homemenu {
margin-bottom: 30px;
}
.tpoffcanvas .homemenu-title {
color: var(--tp-common-white);
}
.tpoffcanvas .tp-main-menu-mobile {
margin-bottom: 30px;
}
.tpoffcanvas.opened {
opacity: 1;
visibility: visible;
}
@media (max-width: 574.98px) {
.tpoffcanvas {
width: 100%;
padding: 40px 35px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tpoffcanvas {
width: 400px;
padding: 40px;
}
}
.tpoffcanvas.opened {
right: 0;
-webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-duration: 0.6s;
}
.tpoffcanvas-btn {
padding: 18px 40px;
background: var(--tp-theme-primary);
display: inline-block;
font-size: 16px;
letter-spacing: 0px;
line-height: 20px;
color: var(--tp-common-white);
font-weight: 500;
position: relative;
transition: all 0.3s linear;
overflow: hidden;
z-index: 1;
line-height: 1;
width: 100%;
text-align: center;
border-radius: 50px;
}
.tpoffcanvas-btn:hover {
background: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
}
.tpoffcanvas__contact-title h5 {
font-size: 18px;
color: var(--tp-common-black);
font-weight: 500;
margin-bottom: 30px;
display: inline-block;
}
.tpoffcanvas__contact-info {
margin-bottom: 30px;
}
.tpoffcanvas__contact-info ul li {
font-size: 16px;
color: var(--tp-common-black);
margin-bottom: 15px;
list-style-type: none;
}
.tpoffcanvas__contact-info ul li i {
width: 16px;
transform: translateY(5px);
line-height: 1;
}
@media (max-width: 574.98px) {
.tpoffcanvas__contact-info ul li {
font-size: 14px;
}
}
.tpoffcanvas__contact-info ul li:last-child {
margin-bottom: 0;
}
.tpoffcanvas__contact-info ul li a {
margin-left: 10px;
transition: 0.3s;
}
.tpoffcanvas__contact-info ul li a:hover {
color: var(--tp-theme-secondary);
}
.tpoffcanvas__logo {
margin-bottom: 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tpoffcanvas__logo {
padding-top: 0;
}
}
@media (max-width: 574.98px) {
.tpoffcanvas__logo {
padding-top: 0;
}
}
@media (max-width: 574.98px) {
.tpoffcanvas__logo img {
width: 240px;
}
}
.tpoffcanvas__close-btn button {
position: absolute;
right: 30px;
top: 37px;
transition: 0.4s;
-webkit-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
-moz-transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition: all 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
transition-duration: 0.3s;
height: 40px;
width: 40px;
line-height: 43px;
border-radius: 4px;
border: 1px solid rgba(6, 7, 40, 0.1);
color: var(--tp-common-black);
}
.tpoffcanvas__close-btn button:hover {
background-color: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
border-color: var(--tp-theme-secondary);
}
.tpoffcanvas__close-btn button i {
font-weight: 300;
font-size: 20px;
transition: 0.4s;
}
.tpoffcanvas__social {
margin-top: 30px;
}
.tpoffcanvas__social .social-icon a {
height: 40px;
width: 40px;
line-height: 36px;
text-align: center;
font-size: 16px;
border: 1px solid #EAEAEF;
color: var(--tp-common-black);
margin-right: 15px;
transition: 0.3s;
display: inline-block;
border-radius: 4px;
}
@media (max-width: 574.98px) {
.tpoffcanvas__social .social-icon a {
margin-right: 3px;
height: 50px;
width: 50px;
line-height: 53px;
font-size: 15px;
}
}
.tpoffcanvas__social .social-icon a:hover {
background-color: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
border-color: var(--tp-theme-secondary);
}
.tp-offcanvas-menu ul li .tp-submenu .homemenu {
position: relative;
}
.tp-offcanvas-menu ul li .tp-submenu .homemenu.comeing-soon .homemenu-thumb {
position: relative;
}
.tp-offcanvas-menu ul li .tp-submenu .homemenu.comeing-soon .homemenu-thumb::before {
position: absolute;
z-index: 22;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
backdrop-filter: blur(6px);
background-color: rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
.tp-offcanvas-menu ul li .tp-submenu .homemenu:hover .homemenu-btn {
opacity: 1;
visibility: visible;
top: 50%;
}
.tp-offcanvas-menu ul li .tp-submenu .homemenu-btn {
position: absolute;
top: 55%;
transform: translateY(-50%);
left: 0;
right: 0;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-offcanvas-menu ul li .tp-submenu .homemenu-btn .tp-btn-lg {
padding: 12px 17px;
font-size: 14px;
}
}
/*----------------------------------------*/
/* 2.3 Breadcrumb
/*----------------------------------------*/
.tp-breadcrumb-area {
background: #f5f5f5;
}
.tp-breadcrumb-content {
backdrop-filter: blur(20px);
border-radius: 4px 4px 0 0;
padding: 10px 0;
}
@media (max-width: 574.98px) {
.tp-breadcrumb-content {
margin-right: 0;
/* padding: 32px 30px 32px 30px; */
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-breadcrumb-spacing {
/* padding-top: 120px; */
}
}
.tp-breadcrumb-dvdr ul li {
font-weight: 500;
font-size: 12px;
color: var(--tp-common-black);
list-style: none;
display: inline-block;
}
.tp-breadcrumb-dvdr ul li.dvdr {
margin: 0 5px;
}
.tp-breadcrumb-dvdr ul li a:hover {
color: var(--tp-common-white-2);
}
/*----------------------------------------*/
/* 2.11 Section Title
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-section-title {
font-size: 45px;
}
}
.tp-section-5-subtitle::before {
position: absolute;
content: "";
width: 5px;
height: 5px;
left: 0;
top: 10px;
background: var(--tp-grey-1);
border-radius: 30px;
}
.tp-section-x-spacing {
padding-left: 50px;
padding-right: 50px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
.tp-section-x-spacing {
padding-left: 30px;
padding-right: 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-section-x-spacing {
padding-left: 15px;
padding-right: 15px;
}
}
/*----------------------------------------*/
/* 2.10 Search css start
/*----------------------------------------*/
.tp-search-form-toggle {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--tp-common-white);
z-index: 100;
padding-top: 70px;
padding-bottom: 100px;
opacity: 0;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
-webkit-transform: translateY(calc(-100% - 80px));
-ms-transform: translateY(calc(-100% - 80px));
transform: translateY(calc(-100% - 80px));
-webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
z-index: 9999;
}
.tp-search-form-toggle.active {
opacity: 1;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.tp-search-form-toggle.active .tp-search-form-input {
transform: translateY(0px);
opacity: 1;
transition-delay: 0.3s;
}
.tp-search-form-toggle.active .tp-search-form-input:after {
width: 100%;
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.tp-search-form-icon {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 22px;
color: var(--tp-common-black);
}
.tp-search-form-icon:hover {
color: var(--tp-theme-primary);
}
.tp-search-form-input {
position: relative;
height: 52px;
transform: translateY(-40px);
transition: all 0.3s ease-in-out;
transition-delay: 0.5s;
opacity: 0;
}
.tp-search-form-input input {
width: 100%;
height: 100%;
background-color: transparent;
border: 0;
outline: 0;
font-size: 18px;
font-weight: 500;
color: var(--tp-common-black);
border-bottom: 1px solid transparent;
padding: 0;
padding-right: 30px;
}
.tp-search-form-input input::placeholder {
font-size: 20px;
color: var(--tp-gray-3);
}
.tp-search-form-input input~.tp-search-focus-border {
position: absolute;
bottom: 0;
left: auto;
right: 0;
width: 0;
height: 1px;
background-color: var(--tp-common-black);
transition: all 0.5s;
}
.tp-search-form-input input:focus~.tp-search-focus-border {
width: 100%;
left: 0;
right: auto;
transition: all 0.5s;
}
.tp-search-form-input:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 0%;
height: 1px;
background-color: rgba(255, 192, 124, 0.6);
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tp-search-close {
color: var(--tp-common-black);
font-size: 40px;
transition: all 0.3s ease;
}
.tp-search-close:hover {
color: var(--tp-theme-primary);
transform: rotate(180deg);
}
.tp-search-body-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(31, 49, 48, 0.8);
z-index: 99;
cursor: -webkit-zoom-out;
cursor: zoom-out;
-webkit-transform: translateY(calc(-100% - 80px));
-ms-transform: translateY(calc(-100% - 80px));
transform: translateY(calc(-100% - 80px));
-webkit-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.tp-search-body-overlay.active {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
/*----------------------------------------*/
/* 2.5 instagram
/*----------------------------------------*/
.tp-instagram-wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
row-gap: 10px;
column-gap: 10px;
}
.tp-instagram-link a {
position: relative;
display: block;
overflow: hidden;
border-radius: 4px;
}
.tp-instagram-link a svg {
position: absolute;
color: var(--tp-common-white);
font-size: 16px;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
transition: all 0.4s ease;
z-index: 2;
}
.tp-instagram-link a::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: rgba(31, 49, 48, 0.8);
opacity: 0.902;
transform: scale(0);
border-radius: 4px;
transition: all 0.4s ease;
z-index: 1;
}
.tp-instagram-link a img {
transition: all 0.4s ease;
}
.tp-instagram-link a:hover img {
transform: scale(1.1);
}
.tp-instagram-link a:hover svg {
opacity: 1;
}
.tp-instagram-link a:hover::before {
transform: scale(1);
}
.tp-instagram-link img {
width: 100%;
border-radius: 4px;
}
.tp-instagram-title {
font-size: 18px;
color: var(--tp-theme-primary);
font-weight: 500;
margin-bottom: 25px;
display: block;
}
.tp-instagram-mrg-icon a {
font-size: 24px;
color: var(--tp-theme-primary);
width: 80px;
height: 80px;
border-radius: 40px;
background-color: var(--tp-common-white);
display: inline-block;
line-height: 90px;
position: absolute;
top: 40%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
transform: scale(0);
transition: all 0.4s linear;
}
.tp-instagram-mrg-icon a:hover {
color: var(--tp-theme-primary);
}
.tp-instagram-mrg-thumb img {
transition: all 0.4s linear;
}
.tp-instagram-mrg-thumb:hover .tp-instagram-mrg-bg {
left: 0;
right: 0;
opacity: 0;
transition: all 0.4s linear;
}
.tp-instagram-mrg-thumb:hover img {
transform: scale(1.2) rotate(-2deg);
}
.tp-instagram-mrg-thumb:hover .tp-instagram-mrg-icon a {
transform: scale(1);
}
.tp-instagram-mrg-bg {
background: rgba(255, 255, 255, 0.3);
opacity: 0.651;
bottom: 0;
left: 50%;
position: absolute;
right: 51%;
top: 0;
opacity: 1;
pointer-events: none;
transition: all 0.4s linear;
z-index: 1;
}
.tp-instagram-mrg-pd {
height: 180px;
width: 100%;
background-color: #f8e7d6;
display: block;
position: relative;
z-index: 1;
margin-bottom: -180px;
}
/*----------------------------------------*/
/* 3.1 Header Style 1
/*----------------------------------------*/
.tp-header-top-info ul {
display: flex;
align-items: center;
gap: 30px;
}
.tp-header-top-info ul li {
font-weight: 400;
font-size: 16px;
color: var(--tp-common-white);
list-style: none;
display: flex;
align-items: center;
}
.tp-header-top-info ul li a {
display: flex;
align-items: center;
gap: 10px;
}
.tp-header-top-info ul li a:hover {
color: var(--tp-theme-secondary);
}
.tp-header-top-info ul li a svg {
color: var(--tp-theme-secondary);
}
.tp-header-top-info ul li .tp-border {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.4);
}
.tp-header-top-selected-lang::after {
position: absolute;
transition: all 0.3s ease;
/* content: "\f107"; */
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
color: var(--tp-common-white);
font-size: 14px;
font-family: var(--tp-ff-fontawesome);
}
.tp-header-top-lang-list {
position: absolute;
top: 120%;
right: 0;
background-color: var(--tp-common-white);
z-index: 11;
padding: 15px 15px;
min-width: 100px;
visibility: hidden;
opacity: 0;
box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1);
transition: all 0.2s ease-out 0s;
}
.tp-header-top-lang-list li {
list-style: none;
color: var(--tp-theme-primary);
text-align: left;
font-size: 16px;
cursor: pointer;
-webkit-transition: all 0.3s 0s ease-out;
-moz-transition: all 0.3s 0s ease-out;
-ms-transition: all 0.3s 0s ease-out;
-o-transition: all 0.3s 0s ease-out;
transition: all 0.3s 0s ease-out;
}
.tp-header-top-lang-list li:hover {
color: var(--tp-theme-primary);
}
.tp-header-top-lang:hover .tp-header-top-lang-list {
visibility: visible;
opacity: 1;
top: 100%;
}
.tp-header-top-right {
gap: 30px;
justify-content: end;
}
.tp-header-top-right-border {
height: 20px;
width: 1px;
background: rgba(255, 255, 255, 0.4);
}
.tp-header-top-spacing {
padding: 12px 0px;
}
.tp-header-left {
gap: 96px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-header-left {
gap: 40px;
}
}
.tp-header-sidebar-btn {
width: 48px;
height: 48px;
line-height: 40px;
color: var(--tp-theme-primary);
}
.tp-header-sidebar-btn:hover {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
border-color: var(--tp-theme-primary);
}
.tp-header-search button {
transition: all 0.4s ease;
}
.tp-header-search button:hover {
color: var(--tp-grey-1);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-header-btn {
margin-left: 10px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-header-lg-space {
padding: 10px 20px;
}
}
@media (max-width: 574.98px) {
.tp-header-lg-space {
padding: 10px 0;
}
}
.tp-header-2-spacing {
border-radius: 26px;
background: #f6f6f6;
}
.tp-header-2-info ul {
display: flex;
align-items: center;
padding-left: 30px;
}
.tp-header-2-info ul li {
list-style: none;
position: relative;
}
.tp-header-2-info ul li:not(:last-child) {
margin-right: 30px;
padding-right: 30px;
}
.tp-header-2-info ul li:not(:last-child)::before {
position: absolute;
content: "";
width: 6px;
height: 6px;
background: var(--tp-grey-1);
border-radius: 20px;
top: 50%;
transform: translateY(-50%);
right: 0;
}
.tp-header-2-info ul li a {
font-weight: 500;
font-size: 16px;
}
.tp-header-2-info ul li a:hover {
color: var(--tp-grey-1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-header-2-main {
padding: 15px 0px;
}
}
.tp-header-2-main .tp-header-top-selected-lang {
line-height: 46px;
transition: all 0.4s ease;
}
.tp-header-2-main .tp-header-top-selected-lang::after {
display: none;
}
.tp-header-2-main .tp-header-search button:hover {
color: var(--tp-common-white);
}
.tp-header-2-main .tp-main-menu>nav>ul>li {
padding: 27px 0px;
}
.tp-header-2-right .tp-main-menu>nav>ul>li.has-dropdown>a::after {
display: none;
}
.tp-header-2-right .tp-main-menu>nav>ul>li:not(:last-child) {
margin-right: 14px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-header-2-right .tp-main-menu>nav>ul>li:not(:last-child) {
margin-right: 3px;
}
}
.tp-header-2-right .tp-main-menu>nav>ul>li>a {
border: 1px solid rgba(31, 49, 48, 0.15);
border-radius: 30px;
padding: 9px 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-header-2-right .tp-main-menu>nav>ul>li>a {
padding: 9px 17px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-header-2-right .tp-main-menu {
margin-right: 30px;
}
}
.tp-header-3-top {
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
padding: 21px 0px;
}
.tp-header-3-main {
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-header-3-main {
padding: 10px 0;
}
}
.tp-header-3-main .tp-main-menu>nav>ul>li.has-dropdown>a {
padding: 7px 17px;
}
.tp-header-3-location ul {
display: flex;
align-items: center;
}
.tp-header-3-location ul li {
list-style: none;
display: flex;
align-items: center;
margin-right: 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-header-3-location ul li {
margin-right: 40px;
}
}
.tp-header-3-location ul li .icons {
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
display: inline-block;
background: var(--tp-theme-primary);
border-radius: 50%;
margin-right: 15px;
flex: 0 0 auto;
}
.tp-header-3-lang .tp-header-top-lang-list {
min-width: 150px;
}
.tp-header-3-lang .tp-header-top-lang-list li {
display: flex;
align-items: center;
}
.tp-header-3-lang .tp-header-top-lang-list li:not(:last-child) {
margin-bottom: 10px;
}
.tp-header-3-lang .tp-header-top-lang-list li img {
margin-right: 7px;
}
.tp-header-3-lang .tp-header-top-selected-lang::after {
color: var(--tp-theme-primary);
}
.tp-header-4-top {
background: var(--tp-theme-primary);
border-bottom: none;
}
.tp-header-4-top .tp-header-3-location ul li .icons {
background: rgba(255, 255, 255, 0.1);
}
.tp-header-4-top .tp-header-3-location ul li p {
color: var(--tp-grey-3);
}
.tp-header-4-top .tp-header-3-location ul li p a:hover {
color: var(--tp-theme-secondary);
}
.tp-header-4-top .tp-header-3-lang .tp-header-top-selected-lang::after {
color: var(--tp-grey-3);
}
.tp-header-8-main {
padding: 5px 0px;
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-header-8-main {
padding: 15px 0px;
}
}
.tp-header-8-right .tp-header-sidebar-btn {
background: transparent;
color: var(--tp-common-white);
border-color: rgba(255, 255, 255, 0.1);
}
.tp-header-8-right .tp-header-sidebar-btn:hover {
background: var(--tp-common-white);
color: var(--tp-theme-primary);
border-color: var(--tp-common-white);
}
.header-sticky {
position: fixed;
left: 0;
margin: auto;
top: 0;
width: 100%;
box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
z-index: 991;
animation: 0.95s ease 0s normal forwards 1 running headerSlideDown;
-webkit-box-shadow: 0px 4px 10px rgba(3, 4, 28, 0.1);
box-shadow: 0px 4px 10px rgba(3, 4, 28, 0.1);
border-radius: 0;
background: var(--tp-common-white);
}
.header-sticky .tp-main-menu>nav>ul>li {
padding: 11px 0px;
}
.header-sticky .tp-main-menu>nav>ul>li>a {
padding: 22px 0px;
}
.header-sticky .tp-header-2-right .tp-main-menu>nav>ul>li>a {
padding: 9px 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.header-sticky .tp-header-2-right .tp-main-menu>nav>ul>li>a {
padding: 9px 17px;
}
}
/* HEADER CSS */
/*----------------------------------------*/
/* 4.1 Main menu css
/*----------------------------------------*/
.tp-main-menu>nav>ul>li {
list-style: none;
display: inline-block;
position: relative;
}
.tp-main-menu>nav>ul>li:not(:last-child) {
margin-right: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-main-menu>nav>ul>li:not(:last-child) {
margin-right: 18px;
}
}
.tp-main-menu>nav>ul>li>a {
font-weight: 500;
font-size: 18px;
color: var(--tp-common-black);
position: relative;
padding: 32px 0px;
display: inline-block;
}
.tp-main-menu>nav>ul>li>a:hover {
color: var(--tp-grey-1);
}
.tp-main-menu>nav>ul>li>a:hover::after {
color: var(--tp-grey-1);
transform: rotate(180deg);
}
.tp-main-menu>nav>ul>li:hover>.submenu {
visibility: visible;
opacity: 1;
top: 100%;
}
.tp-main-menu>nav>ul>li:hover>a {
color: var(--tp-theme-primary);
}
.tp-main-menu>nav>ul>li:hover>a::after {
color: var(--tp-grey-1);
transform: rotate(180deg);
}
.tp-main-menu>nav>ul>li.has-dropdown>a {
position: relative;
}
.tp-main-menu>nav>ul>li.has-dropdown>a::after {
content: "\f107";
font-size: 16px;
color: var(--tp-common-black);
font-family: var(--tp-ff-fontawesome);
font-weight: 400;
margin-left: 3px;
display: inline-block;
-webkit-transition: all 0.3s 0s ease-out;
-moz-transition: all 0.3s 0s ease-out;
-ms-transition: all 0.3s 0s ease-out;
-o-transition: all 0.3s 0s ease-out;
transition: all 0.3s 0s ease-out;
}
.tp-main-menu>nav>ul>li.has-dropdown>a.tp-static {
position: static;
}
.tp-main-menu>nav>ul>li>.submenu {
position: absolute;
top: 115%;
left: 0;
min-width: 260px;
padding: 22px 0 12px;
background: var(--tp-common-white);
transition: all 0.3s linear;
display: block;
z-index: 9999;
border-radius: 0px 0px 4px 4px;
transform-origin: top center;
box-shadow: 0px 10px 30px 0px rgba(25, 25, 26, 0.1);
visibility: hidden;
opacity: 0;
}
.tp-main-menu>nav>ul>li>.submenu li {
display: block;
width: 100%;
margin: 0;
padding: 0;
transform: translateY(-10px);
}
.tp-main-menu>nav>ul>li>.submenu li .submenu {
right: -100%;
left: auto;
top: 0;
}
.tp-main-menu>nav>ul>li>.submenu li a {
position: relative;
z-index: 11;
color: var(--tp-common-black);
font-weight: 500;
font-size: 16px;
padding: 5px 28px;
padding-bottom: 1px;
width: 100%;
text-transform: capitalize;
display: block;
}
.tp-main-menu>nav>ul>li>.submenu li a:hover {
color: var(--tp-theme-primary);
}
.tp-main-menu>nav>ul>li>.submenu li a::before {
position: absolute;
content: "";
left: 25px;
top: 63%;
transition: all 0.4s ease;
transform: translateY(-50%);
width: 0;
height: 1px;
background-color: var(--tp-theme-primary);
}
.tp-main-menu>nav>ul>li>.submenu li:hover>a {
color: var(--tp-theme-primary);
padding-left: 43px;
}
.tp-main-menu>nav>ul>li>.submenu li:hover>a::before {
width: 12px;
}
.tp-main-menu>nav>ul>li>.submenu li:hover>.submenu {
transform: translateY(0);
visibility: visible;
opacity: 1;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu {
position: absolute;
top: 115%;
left: 0;
right: 0;
padding: 0;
width: 100%;
z-index: 999;
background: var(--tp-common-white);
box-shadow: 0px 10px 30px 0px rgba(25, 25, 26, 0.1);
overflow: hidden;
margin: auto;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper {
padding: 30px 30px 0px 30px;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu {
margin-bottom: 25px;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu:hover .homemenu-btn {
opacity: 1;
visibility: visible;
top: 50%;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-thumb {
height: 250px;
border-radius: 4px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-thumb {
height: auto;
}
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-thumb a {
padding: 0;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-thumb img {
transition: all 0.4s ease;
object-fit: cover;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-thumb:hover img {
transform: scale(1.06);
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-btn {
position: absolute;
top: 55%;
transform: translateY(-50%);
left: 0;
right: 0;
text-align: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-thumb-wrap {
padding: 10px;
border: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-title {
font-size: 16px;
font-weight: 500;
line-height: 1;
color: var(--tp-theme-primary);
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-title a {
padding: 0;
color: var(--tp-theme-primary);
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .homemenu-title a:hover {
color: var(--tp-grey-1);
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .comeing-soon .homemenu-thumb {
position: relative;
}
.tp-main-menu>nav>ul>li .tp-main-mega-menu .tp-homemenu-wrapper .comeing-soon .homemenu-thumb::before {
position: absolute;
z-index: 22;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
backdrop-filter: blur(6px);
background-color: rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
.tp-main-menu-5>nav>ul>li.has-dropdown>a::after {
display: none;
}
.tp-main-menu-8>nav>ul {
margin-left: 82px;
margin-right: 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-main-menu-8>nav>ul {
margin-left: 0;
}
}
.tp-main-menu-8>nav>ul>li:not(:last-child) {
margin-right: 61px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-main-menu-8>nav>ul>li:not(:last-child) {
margin-right: 30px;
}
}
.tp-main-menu-8>nav>ul>li>a {
color: var(--tp-common-white);
}
.tp-main-menu-8>nav>ul>li>a:hover {
color: #f6f6f6a8;
}
.tp-main-menu-8>nav>ul>li>a::after {
display: none !important;
}
.tp-onepage-menu li a.active {
color: var(--tp-grey-1);
}
/*----------------------------------------*/
/* 4.2 Mobilemenu css
/*----------------------------------------*/
.tp-offcanvas-menu {
margin-bottom: 40px;
}
.tp-offcanvas-menu ul {
list-style: none;
}
.tp-offcanvas-menu ul li {
position: relative !important;
}
.tp-offcanvas-menu ul li>a {
padding: 8px 0;
display: block;
font-size: 15px;
font-weight: 500;
}
.tp-offcanvas-menu ul li:not(:last-child)>a {
border-bottom: 1px solid rgba(1, 15, 28, 0.1);
}
.tp-offcanvas-menu ul li.active>a {
color: var(--tp-theme-primary);
}
.tp-offcanvas-menu ul li.active>.tp-menu-close {
color: var(--tp-common-white);
background: var(--tp-theme-primary);
border-color: var(--tp-theme-primary);
}
.tp-offcanvas-menu ul li.active>.tp-menu-close i {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.tp-offcanvas-menu ul li .tp-submenu {
display: none;
}
.tp-offcanvas-menu ul li .tp-submenu.submenu {
padding-left: 20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-offcanvas-menu .tp-main-mega-menu {
padding-left: 0 !important;
}
}
.tp-offcanvas-menu .tp-main-mega-menu .homemenu-title {
font-size: 16px;
font-weight: 500;
line-height: 1;
color: var(--tp-theme-primary);
}
.tp-offcanvas-menu .tp-main-mega-menu .homemenu-title a {
padding: 0;
color: var(--tp-theme-primary);
}
.tp-offcanvas-menu .tp-main-mega-menu .homemenu {
margin-bottom: 30px;
}
.tp-menu-close {
position: absolute;
right: 0;
top: 6px;
height: 30px;
width: 30px;
font-size: 12px;
line-height: 29px;
text-align: center;
border: 1px solid rgba(1, 15, 28, 0.12);
}
.tp-menu-close i {
transition: all 0.3s;
}
/*----------------------------------------*/
/* 5.2 Postbox css
/*----------------------------------------*/
.tp-postbox-item {
border: 1px solid rgba(31, 49, 48, 0.15);
border-radius: 4px;
padding: 40px 40px 40px 40px;
}
@media (max-width: 574.98px) {
.tp-postbox-item {
padding: 20px 20px 20px 20px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-postbox-meta-single.mr-50 {
margin-right: 25px;
}
}
.tp-postbox-meta-item {
display: flex;
align-items: center;
flex-wrap: wrap;
border-bottom: 1px solid rgba(31, 49, 48, 0.15);
padding-bottom: 10px;
}
.tp-postbox-video {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
}
.tp-postbox-slider-arrow button {
font-size: 30px;
position: absolute;
top: 50%;
left: 40px;
z-index: 2;
transform: translateY(-50%);
color: var(--tp-common-white);
}
.tp-postbox-slider-arrow button.postbox-arrow-next {
left: auto;
right: 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-postbox-wrapper {
margin-right: 0;
}
}
.tp-postbox-details-feature-list ul li {
list-style: none;
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-1);
display: flex;
align-items: center;
margin-bottom: 10px;
}
.tp-postbox-details-feature-list ul li i {
width: 20px;
height: 20px;
background: var(--tp-common-white);
border-radius: 40px;
text-align: center;
font-size: 12px;
line-height: 20px;
margin-right: 15px;
}
.tp-postbox-details-author-avatar {
flex: 0 0 auto;
}
.tp-postbox-details-author-avatar img {
border-radius: 100px;
width: 72px;
flex: 0 0 auto;
height: 70px;
}
.tp-postbox-details-author-social ul {
display: flex;
}
.tp-postbox-details-author-social ul li {
list-style: none;
margin-right: 8px;
}
.tp-postbox-details-author-social ul li a {
width: 36px;
height: 36px;
display: inline-block;
text-align: center;
line-height: 36px;
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 4px;
}
.tp-postbox-details-author-social ul li a:hover {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
border-color: var(--tp-theme-primary);
}
.tp-postbox-details-author-box {
padding: 34px 120px 40px 33px;
}
@media (max-width: 574.98px) {
.tp-postbox-details-author-box {
padding: 34px 30px 40px 33px;
}
}
.tp-postbox-details-author-qoute {
position: absolute;
bottom: 0;
right: 40px;
}
@media (max-width: 574.98px) {
.tp-postbox-details-author-qoute {
display: none;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-postbox-details-wrapper {
margin-right: 0;
}
}
.tp-postbox-comment ul li {
list-style: none;
margin-bottom: 40px;
padding-bottom: 40px;
}
.tp-postbox-comment ul li:not(:last-child) {
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-postbox-comment ul li.ckildren {
padding-left: 115px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-postbox-comment ul li.ckildren {
padding-left: 0;
}
}
.tp-postbox-comment-avater {
flex: 0 0 auto;
}
.tp-postbox-comment-avater img {
width: 80px;
height: 80px;
flex: 0 0 auto;
}
.tp-postbox-comment-reply a {
font-weight: 500;
font-size: 14px;
color: var(--tp-theme-primary);
display: inline-block;
padding: 2px 17px;
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 4px;
}
.tp-postbox-comment-reply a:hover {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
border-color: var(--tp-theme-primary);
}
/*----------------------------------------*/
/* 5.1 blog start
/*----------------------------------------*/
.tp-blog-cetagory {
border-radius: 14px;
padding: 1px 15px;
transition: all 0.4s ease;
}
.tp-blog-cetagory:hover {
background: var(--tp-common-white);
color: var(--tp-thene-primary);
}
.tp-blog-cetagory-wrap {
top: 30px;
left: 30px;
}
.tp-blog-date {
width: 60px;
height: 60px;
padding-top: 10px;
backdrop-filter: blur(40px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%);
}
.tp-blog-date span {
transform: translateY(-5px);
display: inline-block;
}
.tp-blog-author img {
width: 30px;
}
.tp-blog-author-wrap {
position: absolute;
bottom: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: end;
width: 100%;
padding: 30px;
}
.tp-blog-thumb .thumbs {
transition: all 0.4s ease;
}
.tp-blog-item:hover .tp-blog-thumb .thumbs {
transform: scale(1.1);
}
.tp-blog-video {
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
text-align: center;
}
.tp-blog-video .tp-about-bottom-video-btn {
background: var(--tp-theme-secondary);
}
.tp-blog-2-wrap {
border: 1px solid rgba(31, 49, 48, 0.1);
padding: 10px;
margin-right: 40px;
}
.tp-blog-2-wrap:hover .tp-blog-2-thumb img {
transform: scale(1.06);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-2-wrap {
margin-right: 0;
}
}
.tp-blog-2-content {
padding: 10px 10px 10px 66px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-2-content {
margin-top: 20px;
padding: 10px 10px 10px 10px;
}
}
.tp-blog-2-cetagory span {
padding: 1px 13px;
}
.tp-blog-2-thumb {
margin-right: -56px;
overflow: hidden;
}
.tp-blog-2-thumb img {
transition: all 0.3s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-2-thumb {
margin-right: 0;
}
}
.tp-blog-2-right-wrap {
height: 100%;
margin-left: -30px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-2-right-wrap {
margin-left: 0;
}
}
.tp-blog-2-right-wrap .tp-border {
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.tp-blog-2-right-wrap .tp-blog-2-cetagory span {
border: 1px solid rgba(255, 255, 255, 0.25);
}
.tp-blog-2-right-wrap .tp-blog-2-content-2 {
padding: 55px 60px 55px 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-2-right-wrap .tp-blog-2-content-2 {
padding: 35px 30px 35px 30px;
}
}
@media (max-width: 574.98px) {
.tp-blog-2-author {
margin-right: 20px;
}
}
.tp-blog-4-item {
border-top: 1px solid rgba(31, 49, 48, 0.1);
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
padding-top: 40px;
margin-top: -1px;
padding-bottom: 10px;
}
.tp-blog-4-item:hover .tp-blog-4-thumb img {
transform: scale(1.1);
}
.tp-blog-4-thumb {
overflow: hidden;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-4-thumb {
margin-right: 0;
}
}
.tp-blog-4-thumb img {
transition: all 0.4s ease;
}
.tp-blog-4-border {
width: 1px;
height: 20px;
background: rgba(31, 49, 48, 0.1);
}
.tp-blog-4-spacing {
margin: 0 126px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-4-spacing {
margin: 0;
}
}
.tp-blog-4-spacing-2 {
margin-bottom: 40px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-4-spacing-2 {
margin-bottom: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-4-content {
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-4-content .title br {
display: none;
}
}
.tp-blog-6-right-wrap {
margin-left: 0;
}
.tp-blog-6-right-wrap .tp-blog-2-content-2 {
padding: 40px 40px 50px 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-6-right-wrap .tp-blog-2-content-2 {
padding: 25px 20px 25px 20px;
}
}
.tp-blog-6-right-wrap.wrap-white .tp-blog-2-cetagory span {
border: 1px solid rgba(31, 49, 48, 0.15);
}
.tp-blog-6-right-wrap.wrap-white .tp-border {
border-bottom: 1px solid rgba(31, 49, 48, 0.15);
}
.tp-blog-7-right-wrap .tp-blog-2-content-2 {
padding: 50px 50px 50px 50px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-blog-7-right-wrap .tp-blog-2-content-2 {
padding: 25px 20px 25px 20px;
}
}
.tp-blog-7-btn {
width: 60px;
height: 60px;
text-align: center;
line-height: 58px;
}
.tp-blog-7-btn-left {
position: absolute;
left: 0;
bottom: 0;
}
/*----------------------------------------*/
/* 5.3 Sidebar css
/*----------------------------------------*/
.tp-sidebar-search-input input {
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-1);
box-shadow: 0 1px 3px 0 rgba(3, 4, 28, 0.1);
background: var(--tp-common-white);
border-radius: 4px;
}
.tp-sidebar-search-input input::placeholder {
font-size: 16px;
color: var(--tp-grey-1);
}
.tp-sidebar-search-input input:focus {
border-color: var(--tp-common-black);
}
.tp-sidebar-search-input button {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 25px;
color: var(--tp-common-black);
}
.tp-sidebar-author {
box-shadow: 0 1px 3px 0 rgba(3, 4, 28, 0.1);
border-radius: 4px;
}
.tp-sidebar-author-main {
border-radius: 4px 4px 10px 10px;
padding: 40px 40px 30px 40px;
}
.tp-sidebar-author-active {
width: 18px;
height: 18px;
display: inline-block;
border-radius: 30px;
background: #42ce0f;
position: absolute;
top: 0;
right: 3px;
border: 3px solid var(--tp-common-white);
}
.tp-sidebar-social ul {
display: flex;
justify-content: center;
}
.tp-sidebar-social ul li {
list-style: none;
margin: 0 15px;
}
.tp-sidebar-social ul li a {
color: #506767;
transition: all 0.4s ease;
}
.tp-sidebar-social ul li a:hover {
color: #1f3130;
}
.tp-sidebar-call {
padding: 32px 40px 32px 40px;
}
.tp-sidebar-call a {
font-weight: 500;
font-size: 16px;
letter-spacing: -0.02em;
color: var(--tp-grey-1);
display: block;
margin-bottom: 3px;
}
.tp-sidebar-call a.links {
text-decoration: underline;
}
.tp-sidebar-call a:hover {
color: var(--tp-theme-primary);
}
.tp-sidebar-call a span {
margin-right: 10px;
}
.tp-sidebar-border {
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 4px;
}
.tp-sidebar-widget-content {
padding: 35px 40px 30px 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
(max-width: 574.98px) {
.tp-sidebar-widget-content {
padding: 25px 15px 20px 15px;
}
}
.tp-sidebar-widget-content ul li {
list-style: none;
margin-bottom: 10px;
}
.tp-sidebar-widget-content ul li a {
font-weight: 500;
font-size: 16px;
letter-spacing: -0.02em;
color: var(--tp-grey-1);
padding: 19px 20px;
display: inline-block;
box-shadow: 0 1px 3px 0 rgba(32, 33, 36, 0.08);
background: var(--tp-common-white);
border-radius: 2px;
}
.tp-sidebar-widget-content ul li a:hover {
color: var(--tp-theme-primary);
}
.tp-sidebar-widget-content ul li a svg {
margin-right: 8px;
}
.tp-sidebar-widget .tagcloud a {
font-weight: 400;
font-size: 16px;
letter-spacing: -0.02em;
color: var(--tp-theme-primary);
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 4px;
padding: 2px 16px;
display: inline-block;
margin-bottom: 8px;
margin-right: 4px;
}
.tp-sidebar-widget .tagcloud a:hover {
background: var(--tp-theme-primary);
border-color: var(--tp-theme-primary);
color: var(--tp-common-white);
}
.tp-sidebar-rc-post {
box-shadow: 0 1px 3px 0 rgba(3, 4, 28, 0.1);
background: var(--tp-common-white);
padding: 12px 70px 12px 12px;
border-radius: 4px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-sidebar-rc-post {
padding: 12px 20px 12px 12px;
}
}
.tp-sidebar-rc-post-thumb img {
border-radius: 2px;
}
.tp-sidebar-rc-meta span {
font-weight: 400;
font-size: 14px;
color: var(--tp-grey-1);
}
.tp-sidebar-rc-meta span svg {
margin-right: 4px;
}
/*----------------------------------------*/
/* 6.1 Footer Style 1
/*----------------------------------------*/
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-footer-widget {
margin-left: 0;
}
}
.tp-footer-widget .tp-benifits-form-content .tp-icon {
background: rgba(255, 255, 255, 0.06);
}
.tp-footer-widget .tp-footer-input {
background: rgba(255, 255, 255, 0.06);
border-radius: 4px;
color: var(--tp-common-white);
border: none;
}
.tp-footer-widget .tp-footer-input::placeholder {
font-size: 14px;
color: #e5ebea;
}
.tp-footer-menu ul li {
list-style: none;
}
.tp-footer-menu ul li:not(:last-child) {
margin-bottom: 12px;
}
.tp-footer-menu ul li a {
font-weight: 500;
font-size: 16px;
color: var(--tp-grey-3);
}
.tp-footer-menu ul li a:hover {
color: var(--tp-theme-secondary);
}
.tp-footer-meinus {
margin-left: -20px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-footer-meinus {
margin-left: 0;
}
}
.tp-footer-bottom-social ul {
gap: 23px;
}
.tp-footer-bottom-social ul li {
list-style: none;
}
.tp-footer-bottom-social ul li a {
color: var(--tp-common-white);
transition: all 0.4s ease;
}
.tp-footer-bottom-social ul li a:hover {
color: var(--tp-theme-secondary);
}
.tp-footer-bottom-border {
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 10px;
}
.tp-footer-3-top {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.tp-footer-3-top-content .tp-benifits-form-content .tp-icon {
width: 52px;
height: 52px;
line-height: 52px;
background: var(--tp-theme-secondary);
border-radius: 4px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-footer-3-form {
margin-left: 0;
}
}
.tp-footer-3-form .footer-3-btn {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
top: 50%;
right: 4px;
transform: translateY(-50%);
border-radius: 2px;
}
.tp-footer-3-form .tp-footer-input {
font-size: 14px;
padding-right: 70px;
}
.tp-footer-3-widget .tp-footer-bottom-social ul {
gap: 4px;
}
.tp-footer-3-widget .tp-footer-bottom-social ul li a {
width: 48px;
height: 48px;
border-radius: 100%;
background: rgba(255, 255, 255, 0.06);
backdrop-filter: blur(30px);
display: inline-block;
text-align: center;
line-height: 48px;
}
.tp-footer-3-widget .tp-footer-bottom-social ul li a:hover {
color: var(--tp-theme-secondary);
}
.tp-footer-3-bottom {
backdrop-filter: blur(40px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
border-radius: 40px;
padding: 29px 20px;
}
@media (max-width: 574.98px) {
.tp-footer-3-bottom {
padding: 13px 20px;
}
}
.tp-footer-8-border {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.tp-footer-8-location a {
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-3);
display: block;
display: flex;
margin-bottom: 10px;
}
.tp-footer-8-location a span {
width: 20px;
display: inline-block;
margin-right: 10px;
transform: translateY(-2px);
}
.tp-footer-8-form .tp-input {
background: none;
border: none;
font-weight: 400;
font-size: 16px;
color: var(--tp-common-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0;
padding: 0;
height: 30px;
}
.tp-footer-8-form .tp-input:focus {
border-color: var(--tp-common-white);
}
.tp-footer-8-form .tp-input::placeholder {
color: #e5ebea;
}
.tp-footer-8-form .footer-3-btn {
position: absolute;
right: 0;
top: 0;
}
/*----------------------------------------*/
/* 7.12 Hero css start
/*----------------------------------------*/
.tp-hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation: zoom 20s ease-in-out infinite;
animation: zoom 20s ease-in-out infinite;
}
.tp-hero-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
/* Adjust overlay color and opacity */
z-index: 1;
}
.tp-hero-content-wrapper {
position: relative;
z-index: 2;
}
.tp-hero-spacing {
padding-top: 300px;
padding-bottom: 200px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-spacing {
padding-top: 120px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-spacing {
padding-bottom: 40px;
}
}
@media (max-width: 574.98px) {
.tp-hero-spacing {
padding-top: 70px;
}
}
.tp-hero-slider-navigate {
left: 0;
right: 0;
margin: 0 auto;
bottom: 100px;
z-index: 2;
}
.tp-hero-slider-pagenation {
display: flex;
flex-wrap: wrap;
position: absolute;
bottom: -50px;
}
.tp-hero-slider-pagenation .swiper-pagination-bullet {
width: auto;
height: auto;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 18px;
background: transparent;
opacity: 1;
font-family: var(--tp-ff-p);
font-weight: 500;
font-size: 16px;
line-height: 1;
color: rgba(255, 255, 255, 0.7);
padding: 9px;
margin-right: 10px;
transition: all 0.5s ease;
margin-bottom: 5px;
}
.tp-hero-slider-pagenation .swiper-pagination-bullet::before {
position: absolute;
content: "";
top: 41%;
width: 6px;
height: 6px;
background: var(--tp-common-white);
border-radius: 20px;
left: 6px;
transition: all 0.4s ease;
transition-duration: 0.4s;
opacity: 0;
visibility: hidden;
transform: scale(0);
}
.tp-hero-slider-pagenation .swiper-pagination-bullet-active {
color: var(--tp-common-white);
position: relative;
border-radius: 18px;
backdrop-filter: blur(10px);
background: linear-gradient(140deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
/* padding-left: 30px; */
border: transparent;
}
.tp-hero-slider-pagenation .swiper-pagination-bullet-active::before {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.tp-hero-contact {
width: 410px;
padding: 54px 60px 60px 50px;
z-index: 2;
backdrop-filter: blur(40px);
background: linear-gradient(140deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.1) 100%);
float: right;
margin-right: -170px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-contact {
margin-right: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-contact {
margin-bottom: 170px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-contact {
float: left;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-contact {
padding: 24px 20px 20px 15px;
margin-bottom: 220px;
}
}
@media (max-width: 574.98px) {
.tp-hero-contact {
width: 100%;
margin-bottom: 260px;
}
}
.tp-hero-contact-btn {
transition: all 0.5s ease-in-out;
border-bottom: 1px solid rgba(217, 217, 217, 0.2);
position: relative;
}
.tp-hero-contact-btn::before {
position: absolute;
content: "";
width: 0;
height: 1px;
bottom: 0;
left: auto;
right: 0;
background: var(--tp-common-white);
transition: all 0.5s ease-in-out;
}
.tp-hero-contact-btn a {
padding-bottom: 7px;
}
.tp-hero-contact-btn:hover::before {
width: 100%;
right: auto;
left: 0;
}
.tp-hero-contact-btn:hover a {
color: var(--tp-common-white);
padding-left: 20px;
padding-right: 20px;
}
.tp-hero-slider-zoom .swiper-slide.swiper-slide-active .text {
-webkit-animation-name: fadeInLeft;
animation-fill-mode: both;
animation-name: fadeInLeft;
animation-delay: 0.9s;
animation-duration: 1s;
opacity: 1;
}
.tp-hero-slider-zoom .swiper-slide.swiper-slide-active .text2 {
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
animation-fill-mode: both;
animation-delay: 1s;
animation-duration: 1s;
opacity: 1;
}
.tp-hero-slider-zoom .swiper-slide.swiper-slide-active .text3 {
-webkit-animation-name: fadeInLeft;
animation-fill-mode: both;
animation-name: fadeInLeft;
animation-delay: 1.3s;
animation-duration: 1s;
opacity: 1;
}
.tp-hero-slider-zoom .swiper-slide.swiper-slide-active .tp-slider-para-home {
-webkit-animation-name: fadeInRight;
animation-fill-mode: both;
animation-name: fadeInRight;
animation-delay: 1.5s;
animation-duration: 1s;
opacity: 1;
}
.tp-hero-2-icon {
width: 40px;
height: 40px;
flex: 0 0 auto;
line-height: 40px;
background: #C5CDCC;
transform: translateY(6px);
}
.tp-hero-2-thumb img {
border-radius: 4px 4px 0px 0px;
}
.tp-hero-2-call .icon {
width: 52px;
height: 52px;
line-height: 52px;
flex: 0 0 auto;
}
.tp-hero-2-shape {
bottom: 102px;
right: 80px;
}
.tp-hero-2-shape-2 {
top: 292px;
right: 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-2-content {
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-2-right-content {
margin-top: 40px;
}
}
.tp-hero-video-start {
padding-top: 280px;
position: relative;
overflow: hidden;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
.tp-hero-video-start {
padding-top: 200px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-video-start {
padding-top: 150px;
}
}
.tp-hero-video-start .wrapper {
--clip-path: circle(65px at left);
--clip-path-hover: circle(70px at left);
--clip-path-clicked: circle(100vw at left);
--duration: .4s;
--timing-function: ease;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-video-start .wrapper {
display: none;
}
}
.tp-hero-video-start .video-info {
width: 300px;
position: relative;
left: 500px;
top: -115px;
height: 200px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-video-start .video-info {
left: 300px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-hero-video-start .video-info {
left: 300px;
top: -150px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-hero-video-start .video-info {
left: 280px;
top: -235px;
}
}
.tp-hero-video-start .video {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
clip-path: var(--clip-path);
transition: clip-path var(--duration) var(--timing-function);
position: relative;
top: 55px;
left: 100px;
}
.tp-hero-video-start .video::before {
position: absolute;
top: -20px;
left: -20px;
width: 40px;
height: 40px;
background: url(../img/hero/hero-2/video-icon.png);
content: "";
z-index: 999999999999;
background-size: 100%;
}
.tp-hero-video-start .video video {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: auto;
width: auto;
height: auto;
}
.tp-hero-video-start .intro-title {
position: relative;
left: 175px;
top: 70px;
}
.tp-hero-video-start .intro-title .video-title {
font-size: 16px;
text-transform: uppercase;
line-height: 1.3;
}
.tp-hero-video-start .intro-title .video-title span {
display: block;
font-size: 18px;
}
.tp-hero-video-start .intro-title .video-title.close-video-title {
display: none;
}
.tp-hero-video-start #video_check {
width: 200px;
height: 200px;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
border-radius: 40px;
outline: none;
z-index: 2;
appearance: none;
cursor: pointer;
z-index: 9999999;
}
.tp-hero-video-start #video_check:focus {
outline: 0;
}
.tp-hero-video-start #video_check:hover~.video {
-webkit-clip-path: var(--clip-path-hover);
clip-path: var(--clip-path-hover);
}
.tp-hero-video-start #video_check:hover~.text::before {
--r: 25px;
--opacity: 1;
}
.tp-hero-video-start #video_check:hover~.text::after {
-webkit-clip-path: var(--clip-path-hover);
clip-path: var(--clip-path-hover);
}
.tp-hero-video-start #video_check:hover~.text>span::after {
clip-path: var(--clip-path-hover);
}
.tp-hero-video-start #video_check:checked {
width: 100%;
height: 100%;
border-radius: 0;
top: 0;
left: 0;
bottom: 0;
}
.tp-hero-video-start #video_check:checked~.video {
-webkit-clip-path: var(--clip-path-clicked) !important;
clip-path: var(--clip-path-clicked);
}
.tp-hero-video-start #video_check:checked~.text {
--opacity: 0;
transition: opacity 0.3s var(--timing-function);
}
.tp-hero-video-start #video_check:checked~.text::after {
clip-path: var(--clip-path-clicked);
}
.tp-hero-video-start #video_check:checked~.text>span::after {
clip-path: var(--clip-path-clicked);
}
.tp-hero-video-start.start-video .hero3-img {
opacity: 0;
}
.tp-hero-video-start.start-video .sec-title,
.tp-hero-video-start.start-video .sec-sub-title,
.tp-hero-video-start.start-video .hero__text-3 p,
.tp-hero-video-start.start-video .intro-title .video-title {
color: var(--tp-common-white);
position: relative;
z-index: 10;
}
.tp-hero-video-start.start-video .sec-sub-title::after {
background-color: var(--tp-common-white);
}
.tp-hero-video-start.start-video .tp-hero-2-content span {
color: var(--tp-common-white);
}
.tp-hero-video-start.start-video .tp-hero-2-content h2 {
color: var(--tp-common-white);
}
.tp-hero-video-start.start-video .tp-hero-2-content p {
color: var(--tp-common-white);
}
.tp-hero-video-start.start-video .tp-hero-2-right-content p {
color: var(--tp-common-white);
}
.tp-hero-video-start.start-video .tp-hero-2-right-content .tp-hero-2-call a {
color: var(--tp-common-white);
}
.tp-hero-3-wrap {
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-hero-3-call {
flex: 0 0 auto;
}
.tp-hero-3-call span {
width: 52px;
height: 52px;
display: inline-block;
border-radius: 50%;
border: 1px solid rgba(31, 49, 48, 0.1);
text-align: center;
line-height: 50px;
}
.tp-hero-3-content {
padding-top: 127px;
padding-bottom: 127px;
border-right: 1px solid rgba(31, 49, 48, 0.1);
padding-right: 90px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-3-content {
padding-right: 30px;
padding-top: 40px;
padding-bottom: 40px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-3-content {
border-right: none;
padding-right: 0;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-3-content h2 {
font-size: 60px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
.tp-hero-3-content h2 {
font-size: 50px;
}
}
@media (max-width: 574.98px) {
.tp-hero-3-content h2 {
font-size: 36px;
}
}
.tp-hero-3-thumb {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
width: calc(52% - 80px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-3-thumb {
position: inherit;
width: 100%;
transform: inherit;
top: inherit !important;
margin-bottom: 50px;
}
.tp-hero-3-thumb img {
border-radius: 4px;
}
}
.tp-hero-3-btns {
margin-bottom: 190px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-main-menu>nav>ul>li>a {
font-size: 14px;
}
.tp-hero-spacing {
padding-top: 150px;
padding-bottom: 100px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-3-btns {
margin-bottom: 100px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-3-btns {
margin-bottom: 40px;
}
}
.tp-hero-4-tag ul {
display: flex;
gap: 6px;
justify-content: end;
align-items: end;
}
@media (max-width: 574.98px) {
.tp-hero-4-tag ul {
flex-wrap: wrap;
}
}
.tp-hero-4-tag ul li {
list-style: none;
margin-bottom: 10px;
}
.tp-hero-4-tag ul li span {
font-weight: 500;
font-size: 14px;
color: var(--tp-common-white);
display: inline-block;
backdrop-filter: blur(40px);
border-radius: 26px;
padding: 2px 15px;
background: linear-gradient(140deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
}
.tp-hero-4-content {
padding: 237px 100px 60px 100px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-hero-4-content {
padding: 237px 40px 60px 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
.tp-hero-4-content {
padding: 140px 40px 60px 40px;
}
}
@media (max-width: 574.98px) {
.tp-hero-4-content {
padding: 120px 10px 60px 10px;
}
}
.tp-hero-5-top-box {
border: 1px solid rgba(31, 49, 48, 0.06);
border-radius: 4px;
width: 260px;
height: 480px;
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 574.98px) {
.tp-hero-5-top-box {
height: 350px;
}
}
.tp-hero-5-slider .swiper-slide {
width: auto !important;
}
.tp-hero-5-title {
font-weight: 600;
font-size: 80px;
line-height: 112%;
letter-spacing: -0.02em;
text-align: center;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-5-title {
font-size: 70px;
}
.tp-hero-5-title br {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-hero-5-title {
font-size: 65px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tp-hero-5-title {
font-size: 48px;
}
}
@media (max-width: 574.98px) {
.tp-hero-5-title {
font-size: 32px;
}
}
.tp-hero-5-title span {
font-family: var(--tp-ff-dm);
font-style: italic;
font-weight: 400;
}
.tp-hero-5-title img {
margin-left: -10px;
margin-right: -32px;
margin-bottom: -40px;
margin-top: -31px;
}
.tp-hero-5-content-wrap {
margin-top: -496px;
position: relative;
z-index: 2;
}
@media (max-width: 574.98px) {
.tp-hero-5-content-wrap {
margin-top: -370px;
}
}
.tp-hero-5-thumb-space {
padding: 190px 0px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-5-thumb-space {
padding: 100px 0px;
}
}
.tp-hero-6-overly {
position: absolute;
background: linear-gradient(360deg, #1f3130 0%, rgba(31, 49, 48, 0) 100%);
width: 100%;
height: 100%;
bottom: 0;
left: 0;
z-index: -1;
border-radius: 4px;
}
.tp-hero-6-thumb {
padding: 270px 40px 80px 75px;
margin-right: 54px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-6-thumb {
margin-right: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-6-thumb {
padding: 170px 30px 80px 35px;
}
}
.tp-hero-6-border {
border-top: 1px solid rgba(31, 49, 48, 0.1);
padding-top: 26px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-7-text {
margin-left: 0;
}
}
.tp-hero-7-slider-wrap .swiper-slide {
width: auto !important;
}
.tp-hero-7-thumb {
overflow: hidden;
border-radius: 4px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-7-thumb {
width: 300px;
height: 100%;
height: 350px;
}
.tp-hero-7-thumb img {
object-fit: cover;
height: 100%;
}
}
.tp-hero-7-thumb:hover img {
transform: scale(1.05);
}
.tp-hero-7-thumb img {
transition: all 0.4s ease;
}
.tp-hero-7-spacing {
padding-top: 30px;
padding-bottom: 115px;
}
.tp-hero-7-shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
@media (max-width: 574.98px) {
.tp-hero-7-title-wrap br {
display: none;
}
}
.tp-hero-8-trusted-list ul li {
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-1);
list-style: none;
display: inline-block;
}
.tp-hero-8-trusted-list ul li:not(:last-child) {
margin-right: 28px;
}
.tp-hero-8-trusted-list ul li i {
font-size: 16px;
margin-right: 4px;
}
.tp-hero-8-spacing {
padding: 27px 30px 30px 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tp-hero-8-spacing {
padding: 27px 30px 30px 30px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tp-hero-8-spacing {
padding: 50px 30px 30px 30px;
}
}
@media (max-width: 574.98px) {
.tp-hero-8-spacing {
padding: 30px 15px 15px 15px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-8-top-spacing {
padding-top: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-hero-8-avinew {
padding-bottom: 0;
}
}
.tp-text-slider-active .swiper-slide {
width: auto !important;
}
/*----------------------------------------*/
/* 7.11 feature start
/*----------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-feature-item br {
display: none;
}
}
.tp-feature-3-border {
border-top: 1px solid rgba(31, 49, 48, 0.1);
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-feature-3-wrap {
padding-right: 40px;
padding-top: 56px;
padding-bottom: 55px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-3-wrap {
padding-right: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-3-wrap {
padding-left: 0;
flex-direction: column;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-3-wrap.md-space {
padding-bottom: 0;
}
}
.tp-feature-3-wrap span {
width: 80px;
height: 80px;
display: inline-block;
background: var(--tp-theme-primary);
text-align: center;
line-height: 80px;
border-radius: 50%;
flex: 0 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-3-wrap span {
margin-bottom: 30px;
}
}
.tp-feature-4-wrap .tp-feature-3-wrap {
padding-top: 0;
padding-bottom: 35px;
}
.tp-feature-5-icon {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-7-item {
margin-right: 40px;
flex-direction: column;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 1200px) and (max-width: 1399px) and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 1200px) and (max-width: 1399px) and (max-width: 574.98px),
only screen and (min-width: 992px) and (max-width: 1199px) and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 992px) and (max-width: 1199px) and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 992px) and (max-width: 1199px) and (max-width: 574.98px),
only screen and (min-width: 768px) and (max-width: 991px) and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 768px) and (max-width: 991px) and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 991px) and (max-width: 574.98px),
only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 576px) and (max-width: 767px),
only screen and (min-width: 576px) and (max-width: 767px) and (max-width: 574.98px),
only screen and (max-width: 574.98px) and (min-width: 768px) and (max-width: 991px),
only screen and (max-width: 574.98px) and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) and (max-width: 574.98px) {
.tp-feature-7-item {
margin-right: 0;
}
}
.tp-feature-7-item:hover .tp-feature-7-icon {
background: var(--tp-common-white);
color: var(--tp-theme-primary);
}
.tp-feature-7-item-border {
border-right: 1px solid rgba(255, 255, 255, 0.2);
padding-right: 50px;
margin-right: 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-7-item-border {
padding-right: 20px;
margin-right: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-7-item-border {
padding-right: 0;
margin-right: 0;
border-right: none;
}
}
.tp-feature-7-icon {
background: rgba(255, 255, 255, 0.08);
width: 80px;
height: 80px;
text-align: center;
line-height: 80px;
flex: 0 0 auto;
transition: all 0.4s ease;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-7-icon {
margin-bottom: 30px;
}
}
.tp-feature-7-spacing {
padding-top: 120px;
padding-bottom: 200px;
}
.tp-feature-8-icon {
border: 1px solid rgba(31, 49, 48, 0.1);
width: 60px;
height: 60px;
text-align: center;
line-height: 55px;
color: var(--tp-theme-primary);
transition: all 0.3s ease;
}
.tp-feature-8-item {
border: 1px solid rgba(31, 49, 48, 0.1);
padding: 40px 40px 20px 40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-feature-8-item {
padding: 30px 20px 10px 20px;
}
}
.tp-feature-8-item:hover .tp-feature-8-icon {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
}
/*----------------------------------------*/
/* 7.1 about start
/*----------------------------------------*/
.tp-about-thumb {
height: 100%;
}
@media (max-width: 574.98px) {
.tp-about-thumb {
margin-right: 0;
}
}
.tp-about-thumb .thumb {
height: 100%;
object-fit: cover;
}
.tp-about-thumb-2 {
margin-left: -15px;
}
.tp-about-thumb-2 h2 {
color: #fff;
}
.tp-about-thumb-2 p {
color: #fff;
}
.tp-about-thumb-2 span {
color: #fff;
}
.tp-about-shape {
top: 60px;
right: -92px;
}
.tp-about-shape-2 {
position: absolute;
bottom: 0;
right: 0;
}
.tp-about-content {
border: 1px solid rgba(31, 49, 48, 0.08);
border-radius: 4px 0 0 4px;
height: 100%;
padding: 32px 175px 100px 123px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
.tp-about-content {
padding: 100px 100px 100px 123px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-about-content {
padding: 70px 70px 70px 73px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
.tp-about-content {
padding: 30px 30px 30px 33px;
}
}
@media (max-width: 574.98px) {
.tp-about-content {
padding: 60px 12px 30px 12px;
}
}
.tp-about-bottom-content {
margin-left: 129px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-bottom-content {
margin-left: 30px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-bottom-content {
padding-bottom: 0;
}
}
.tp-about-bottom-feature ul {
column-count: 1;
margin-right: 20px;
}
@media (max-width: 574.98px) {
.tp-about-bottom-feature ul {
column-count: 1;
}
}
.tp-about-bottom-feature ul li::before {
content: "";
position: absolute;
top: 3px;
left: 0;
width: 20px;
height: 20px;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
}
.tp-about-bottom-feature ul li {
position: relative;
padding-left: 30px;
/* space for the icon */
}
.tp-about-bottom-feature ul li {
list-style: none;
font-weight: 500;
color: var(--tp-grey-1);
/* display: flex; */
gap: 12px;
margin-bottom: 12px;
}
.tp-about-bottom-right {
padding: 45px 45px 122px 40px;
overflow: hidden;
margin-right: -44px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-bottom-right {
margin-left: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-bottom-right {
padding: 45px 25px 92px 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-bottom-right {
margin-right: 0;
}
}
.tp-about-bottom-grow span {
border-radius: 14px;
padding: 0px 13px;
display: inline-block;
margin-bottom: 5px;
}
.tp-about-bottom-shape {
bottom: 0;
right: 0;
}
.tp-about-bottom-year {
font-size: 80px;
line-height: 75%;
color: rgba(31, 49, 48, 0.08);
bottom: 5px;
left: 5px;
}
.tp-about-bottom-video {
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin-left: 44px;
border-radius: 4px 0px 0px 4px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-bottom-video {
margin-left: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-bottom-video {
padding: 120px 0px;
}
}
.tp-about-bottom-video-btn {
width: 70px;
height: 70px;
display: inline-block;
border-radius: 50%;
background: var(--tp-common-white);
text-align: center;
line-height: 70px;
animation: animate-pulse 3s linear infinite;
}
.tp-about-2-thumb {
margin-right: -55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-2-thumb {
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-2-thumb {
margin-right: 15px;
margin-left: 15px;
}
.tp-about-2-thumb img {
border-radius: 4px;
}
}
.tp-about-2-content {
padding-left: 160px;
padding-right: 200px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-2-content {
padding-left: 60px;
padding-right: 50px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-2-content {
padding-left: 0;
padding-right: 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-2-content {
margin-right: 15px;
margin-left: 15px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-3-content {
margin-left: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-3-content {
padding-top: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-3-info {
margin-left: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-3-info p br {
display: none;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-3-info span br {
display: none;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-3-title-wrap {
padding-bottom: 0;
}
}
@media (max-width: 574.98px) {
.tp-about-3-title-wrap {
margin-right: 0;
}
}
.tp-about-3-list {
width: 234px;
padding: 60px 50px 54px 50px;
border-radius: 50%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-3-list {
margin-bottom: 30px;
}
}
.tp-about-3-list ul li {
font-weight: 500;
color: var(--td-theme-primary);
list-style: none;
margin-bottom: 3px;
}
.tp-about-3-list ul li i {
font-size: 14px;
margin-right: 8px;
}
.tp-about-3-top {
height: 460px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-3-top img {
height: 250px;
object-fit: cover;
}
}
.tp-about-4-thumb {
margin-left: -27px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-4-thumb {
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-4-thumb {
margin-left: 0;
}
}
.tp-about-4-icon {
bottom: 0;
right: 0;
z-index: -1;
}
.tp-about-4-content {
padding-left: 0;
padding-right: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-4-content {
margin-left: 0;
margin-right: 0;
}
}
.tp-about-4-content .tp-about-bottom-feature ul {
column-count: 1;
}
.tp-about-4-content .tp-about-bottom-feature ul li {
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-1);
}
.tp-about-4-content .tp-about-bottom-feature ul li i {
width: 20px;
height: 20px;
border-radius: 50px;
text-align: center;
line-height: 21px;
font-size: 12px;
color: var(--tp-theme-primary);
transform: translateY(3px);
flex: 0 0 auto;
background: var(--tp-common-white);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-4-count {
margin-right: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tp-about-4-count {
display: flex;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tp-about-4-count-item {
border: none;
}
}
.tp-about-5-wrap {
padding: 60px 60px 30px 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-5-wrap {
padding: 30px 30px 0px 30px;
}
}
.tp-about-5-review {
padding: 40px 60px 30px 40px;
}
@media (max-width: 574.98px) {
.tp-about-5-review {
padding: 30px 30px 30px 30px;
}
}
.tp-about-5-review .tp-testimonial-2-ratings {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-about-5-review .tp-testimonial-lwr-content {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 16px;
}
.tp-about-5-list-wrap {
padding: 50px 40px 20px 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-5-list-wrap {
padding: 20px 20px 20px 30px;
}
}
.tp-about-5-list ul li {
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-1);
list-style: none;
display: flex;
margin-bottom: 13px;
}
.tp-about-5-list ul li i {
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
line-height: 20px;
background: var(--tp-common-white);
border-radius: 40px;
font-size: 14px;
margin-top: 2px;
margin-right: 15px;
flex: 0 0 auto;
}
.tp-about-5-logo {
margin-right: -40px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-5-logo {
margin-right: -20px;
}
}
.tp-about-5-logo img {
mix-blend-mode: luminosity;
}
.tp-about-5-thumb {
height: 100%;
}
.tp-about-5-thumb img {
height: 100%;
object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-5-content {
margin-left: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-about-6-content br {
display: none;
}
}
/*----------------------------------------*/
/* 7.20 service start
/*----------------------------------------*/
.tp-service-content {
padding: 0px 20px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-service-content {
padding: 0px 15px;
}
}
.tp-service-content ul li {
display: flex;
list-style: none;
}
.tp-service-content ul li:not(:last-child) {
margin-bottom: 7px;
}
.tp-service-content ul li i {
width: 20px;
height: 20px;
border-radius: 50px;
border: 1px solid var(--tp-border-1);
text-align: center;
line-height: 18px;
font-size: 12px;
color: var(--tp-theme-primary);
margin-right: 15px;
transform: translateY(3px);
flex: 0 0 auto;
}
.tp-service-content h3 {
font-size: 25px;
min-height: 51px;
}
.tp-service-content p {
min-height: 70px
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-service-content h3 {
font-size: 22px;
}
}
.tp-service-item {
padding: 30px 30px 36px 30px;
transition: all 0.5 ease;
z-index: 1;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-service-item {
padding: 15px 15px 20px 15px;
}
}
.tp-service-item:hover {
background: #f6f6f6;
border: 1px solid transparent;
}
.tp-service-item:hover .tp-service-thumb::before {
opacity: 1;
visibility: visible;
}
.tp-service-item:hover .tp-service-thumb img {
transform: scale(1.1);
}
.tp-service-item:hover .tp-service-shape {
opacity: 1;
}
.tp-service-thumb img {
transition: all 0.4s ease;
}
.tp-service-thumb::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
right: 0;
background: rgba(22, 55, 53, 0.45);
border-radius: 2px;
z-index: 1;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.tp-service-icon {
bottom: 20px;
right: 30px;
border-radius: 2px;
width: 80px;
text-align: center;
line-height: 80px;
height: 80px;
display: inline-block;
backdrop-filter: blur(40px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%);
transform: rotate(-180deg);
z-index: 2;
}
.tp-service-shape {
bottom: -1px;
right: -1px;
opacity: 0;
transition: all 0.4s ease-in-out;
z-index: -1;
}
.tp-service-2-wrap:hover .tp-service-2-content-bottom {
opacity: 1;
visibility: visible;
margin-bottom: 0px !important;
padding-bottom: 33px;
}
.tp-service-2-content {
backdrop-filter: blur(40px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
left: 0;
right: 30px;
bottom: 0;
border-radius: 0 4px;
padding: 40px 40px 0 40px;
}
.tp-service-2-content-top a:hover {
color: var(--tp-theme-secondary);
}
.tp-service-2-content-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.tp-service-3-icon {
width: 100px;
height: 100px;
line-height: 100px;
}
.tp-service-3-tag {
padding: 6px 10px;
top: -14px;
left: 40px;
}
.tp-service-3-qube {
width: 280px;
height: 280px;
top: 17%;
left: 0;
right: 0;
margin: 0 auto;
transition: all 0.4s ease;
opacity: 0;
visibility: hidden;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-service-3-qube {
width: 200px;
height: 200px;
}
}
.tp-service-3-wrap {
border: 1px solid rgba(0, 0, 0, 0.1);
padding: 50px 30px 30px 30px;
}
.tp-service-3-wrap-2 {
padding: 50px 50px 50px 50px;
}
@media (max-width: 574.98px) {
.tp-service-3-wrap-2 {
padding: 30px 30px 30px 30px;
}
}
.tp-service-3-wrap:hover .tp-service-3-qube {
transform: rotate(45deg);
opacity: 1;
visibility: visible;
}
.tp-service-3-wrap .service-btn {
border: 1px solid rgba(31, 49, 48, 0.1);
padding: 17px 25px;
}
.tp-service-3-wrap .service-btn:hover {
background: var(--tp-theme-primary);
}
.tp-service-4-title-wrap {
border-radius: 4px 0px 0px 4px;
margin-right: -70px;
padding: 40px 70px 40px 80px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-4-title-wrap {
padding: 40px 30px 40px 30px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-4-title-wrap {
margin-right: 0;
}
}
.tp-service-4-count {
top: 40px;
left: 40px;
padding: 2px 12px;
}
.tp-service-4-slider-thumb {
margin-right: -80px;
height: 100%;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-4-slider-thumb {
margin-right: 0;
margin-left: 0;
}
}
.tp-service-4-slider-thumb img {
height: 100%;
object-fit: cover;
}
.tp-service-4-shape {
bottom: 0;
right: 0;
}
.tp-service-4-content {
padding: 75px 80px 40px 160px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-4-content {
padding: 75px 30px 40px 100px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-4-content {
padding: 75px 30px 40px 50px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-4-content {
flex-direction: column;
}
}
@media (max-width: 574.98px) {
.tp-service-4-content {
padding: 45px 15px 40px 15px;
}
}
.tp-service-4-fealist ul li {
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-1);
margin-bottom: 10px;
list-style: none;
display: flex;
}
.tp-service-4-fealist ul li i {
width: 20px;
height: 20px;
margin-right: 12px;
border-radius: 50px;
text-align: center;
line-height: 21px;
font-size: 12px;
color: var(--tp-theme-primary);
flex: 0 0 auto;
background: var(--tp-common-white);
transform: translateY(4px);
}
.tp-service-4-content .icons {
width: 100px;
height: 100px;
line-height: 100px;
flex: 0 0 auto;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-4-content .icons {
margin-bottom: 30px;
}
}
.tp-service-4-slide .tp-testimonial-2-navigation {
left: -49px;
bottom: 80px;
justify-content: center;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-service-4-slide .tp-testimonial-2-navigation {
left: -10px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-service-4-slide .tp-testimonial-2-navigation {
left: -146px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-4-slide .tp-testimonial-2-navigation {
left: -146px;
left: 0;
position: inherit;
padding: 50px 0px;
justify-content: left;
}
}
.tp-service-4-slide .tp-testimonial-2-navigation span {
border-radius: 4px 0 0 4px;
border: none;
background: var(--tp-theme-primary);
}
.tp-service-4-slide .tp-testimonial-2-navigation span.tp-testimonial-2-next {
border-radius: 0 4px 4px 0;
border-left: 1px solid rgba(158, 203, 200, 0.1);
}
.tp-service-4-slide .tp-testimonial-2-navigation span:hover {
background: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
}
.tp-service-6-count {
padding: 2px 13px;
}
.tp-service-6-wrap {
border: 1px solid rgba(31, 49, 48, 0.1);
padding: 40px 40px 40px 40px;
margin-right: -1px;
margin-bottom: -1px;
}
.tp-service-6-wrap:hover .tp-service-6-thumb {
transform: rotate(0) scale(1);
opacity: 1;
}
.tp-service-6-wrap:hover .tp-service-6-thumb img {
transform: rotate(0) scale(1.01);
}
.tp-service-6-thumb {
opacity: 0;
transform: rotate(4deg) scale(0.8);
transition: opacity 0.35s, transform 0.5s ease-out;
pointer-events: none;
height: 100%;
}
.tp-service-6-thumb img {
transform: rotate(0) scale(1.14);
transition: transform 0.5s ease-out;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-service-8-item {
margin-right: 0;
}
}
.tp-service-8-title-wrap {
position: sticky;
top: 100px;
}
/*----------------------------------------*/
/* 7.13 industry start
/*----------------------------------------*/
.tp-industry-content {
border: 1px solid var(--tp-border-2);
transition: all 0.4s ease;
background: var(--tp-common-white);
}
.tp-industry-content:hover {
background: var(--tp-theme-primary);
}
.tp-industry-content:hover h5 {
color: var(--tp-common-white);
}
.tp-industry-content:hover .tp-industry-icon {
color: var(--tp-common-white);
}
.tp-industry-content:hover .border-right {
background: rgba(255, 255, 255, 0.12);
}
.tp-industry-content .border-right {
background: var(--tp-border-2);
width: 1px;
height: 98px;
}
.tp-industry-icon {
padding: 20px;
width: 100px;
text-align: center;
transition: all 0.4s ease;
}
.tp-industry-7-content {
border: 1px solid rgba(255, 255, 255, 0.12);
}
.tp-industry-7-content:hover {
background: var(--tp-common-white);
border-color: var(--tp-common-white);
}
.tp-industry-7-content:hover .border-right {
background: rgba(31, 49, 48, 0.12);
}
.tp-industry-7-content:hover .tp-industry-icon {
color: var(--tp-theme-primary);
}
.tp-industry-7-content:hover h5 {
color: var(--tp-theme-primary);
}
.tp-industry-7-content .border-right {
background: rgba(255, 255, 255, 0.12);
}
.tp-industry-7-spacing {
padding-bottom: 430px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-industry-7-spacing {
padding-bottom: 90px;
}
}
/*----------------------------------------*/
/* 7.23 industry start
/*----------------------------------------*/
@media (max-width: 574.98px) {
.tp-testimonial-content h4 {
font-size: 20px;
}
}
.tp-testimonial-bg {
height: 740px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-testimonial-bg {
height: 800px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.tp-testimonial-bg {
height: 660px;
}
}
.tp-testimonial-bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-testimonial-bottom {
padding-top: 100px;
}
}
.tp-testimonial-bottom-wrap {
padding: 60px 80px 30px 60px;
backdrop-filter: blur(40px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
border-radius: 4px;
}
@media (max-width: 574.98px) {
.tp-testimonial-bottom-wrap {
padding: 50px 20px 10px 20px;
}
}
.tp-testimonial-bottom-thumb-content {
height: 70px;
padding: 14px 20px 10px 20px;
width: 220px;
}
.tp-testimonial-bottom-thumb-wrap .swiper-wrapper {
display: flex;
align-items: center;
}
.tp-testimonial-bottom-thumb-wrap .swiper-slide {
width: 70px !important;
margin-right: 10px;
}
.tp-testimonial-bottom-thumb-wrap .swiper-slide .tp-testimonial-bottom-thumb {
width: 70px;
position: relative;
}
.tp-testimonial-bottom-thumb-wrap .swiper-slide .tp-testimonial-bottom-thumb img {
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 4px;
cursor: pointer;
}
.tp-testimonial-bottom-thumb-wrap .swiper-slide.swiper-slide-thumb-active img {
border: 2px solid var(--tp-common-white);
}
.tp-testimonial-pagination {
display: flex;
justify-content: space-between;
align-items: center;
}
.tp-testimonial-pagination .swiper-pagination-bullet {
width: 100%;
border-radius: 0px;
height: 2px;
background: rgba(255, 255, 255, 0.2);
margin: 0 1px !important;
opacity: 1;
position: relative;
overflow: hidden;
}
.tp-testimonial-pagination .swiper-pagination-bullet::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.tp-testimonial-pagination .swiper-pagination-bullet-active::before {
animation: slide-progress 6s cubic-bezier(0.3, 0, 0.3, 1) forwards;
background: var(--tp-theme-secondary);
}
.tp-testimonial-shape {
top: 0;
right: 0;
z-index: 2;
}
.tp-testimonial-shape-2 {
right: 300px;
bottom: 60px;
z-index: 2;
mix-blend-mode: screen;
}
.tp-testimonial-2-left {
padding: 61px 10px 62px 10px;
margin-right: 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-2-left {
margin-right: 0;
}
}
.tp-testimonial-2-left-ratings span {
font-size: 14px;
color: var(--tp-common-yellow);
}
.tp-testimonial-2-qoute {
top: 0;
right: 0;
}
.tp-testimonial-2-ratings {
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 15px;
display: inline-block;
padding: 1px 11px;
}
.tp-testimonial-2-ratings span i {
color: var(--tp-common-yellow);
font-size: 12px;
}
.tp-testimonial-2-navigation {
position: absolute;
right: 0;
bottom: 0;
z-index: 2;
}
@media (max-width: 574.98px) {
.tp-testimonial-2-navigation {
position: inherit;
margin-top: 18px;
}
}
.tp-testimonial-2-navigation span {
width: 60px;
height: 60px;
text-align: center;
color: var(--tp-common-white);
line-height: 55px;
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(31, 49, 48, 0.1);
transition: all 0.4s ease;
}
.tp-testimonial-2-navigation span:hover {
background: var(--tp-grey-3);
border-color: var(--tp-grey-3);
color: var(--tp-common-white);
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-2-slider h2 {
margin-right: 50px;
}
}
.tp-hero-btn a {
margin: 0 20px 20px 0;
}
.tp-testimonial-2-slider .swiper-slide {
background: var(--tp-common-white);
}
.tp-testimonial-3-left {
margin-right: 65px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-3-left {
margin-right: 0;
}
}
.tp-testimonial-3-left img {
border-radius: 0px 4px 4px 0px;
}
.tp-testimonial-3-wrap {
border-top: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-testimonial-3-wrap .tp-testimonial-2-slider .swiper-slide {
background: var(--tp-common-white-2);
}
.tp-testimonial-3-slider {
margin-right: 130px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-testimonial-3-slider {
margin-right: 80px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-3-slider {
margin-right: 15px;
margin-left: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-3-slider {
margin-left: 15px;
}
}
@media (max-width: 574.98px) {
.tp-testimonial-3-content {
margin-bottom: 40px;
}
}
.tp-testimonial-3-content .tp-btn-xl {
backdrop-filter: blur(40px);
background: linear-gradient(140deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
}
.tp-testimonial-4-border {
position: relative;
}
.tp-testimonial-4-border::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
background: rgba(255, 255, 255, 0.2);
top: 0;
right: 0;
}
.tp-testimonial-4-wrap .tp-testimonial-2-ratings {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.tp-testimonial-4-wrap .tp-testimonial-2-slider .swiper-slide {
background: transparent;
}
.tp-testimonial-4-wrap .tp-testimonial-2-navigation {
transform: rotate(90deg);
right: auto;
left: -145px;
bottom: 44%;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-4-wrap .tp-testimonial-2-navigation {
position: inherit;
margin-top: 30px;
transform: rotate(0deg);
left: auto;
}
}
.tp-testimonial-4-wrap .tp-testimonial-2-navigation span {
border-color: rgba(255, 255, 255, 0.1);
color: var(--tp-common-white);
background: var(--tp-theme-primary);
}
.tp-testimonial-4-wrap .tp-testimonial-2-navigation span:hover {
color: var(--tp-theme-primary);
background: var(--tp-common-white);
}
.tp-testimonial-4-wrap .tp-testimonial-3-left {
margin-right: 80px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-4-wrap .tp-testimonial-3-left {
margin-right: 20px;
margin-left: 20px;
margin-bottom: 50px;
}
.tp-testimonial-4-wrap .tp-testimonial-3-left img {
border-radius: 4px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-testimonial-4-wrap .tp-testimonial-3-slider {
margin-left: 80px;
}
.tp-service-content p {
min-height: 130px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-4-wrap .tp-testimonial-3-slider {
margin-left: 20px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-4-title {
margin-right: 0 !important;
font-size: 45px;
}
}
.tp-testimonial-6-slide .swiper-slide {
background: var(--tp-common-white-2);
}
.tp-testimonial-author-clients {
border-radius: 10px;
width: 310px;
box-shadow: 0 0 60px 0 rgba(20, 23, 40, 0.08);
background: var(--tp-common-white);
padding: 33px 20px 35px 20px;
position: absolute;
bottom: 40px;
left: 40px;
}
@media (max-width: 574.98px) {
.tp-testimonial-author-clients {
width: 290px;
bottom: 20px;
left: 20px;
}
}
.tp-testimonial-author-clients img {
flex: 0 0 auto;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-testimonial-author-content {
margin-left: 0;
}
.tp-testimonial-author-content h2 br {
display: none;
}
}
.tp-testimonial-author-social {
width: 54px;
height: 54px;
background: #2156db;
display: inline-block;
text-align: center;
color: var(--tp-common-white);
line-height: 49px;
border-radius: 50px;
border: 4px solid var(--tp-common-white);
font-size: 20px;
margin-left: -20px;
}
/*----------------------------------------*/
/* 7.19 project start
/*----------------------------------------*/
.tp-project-content {
margin-left: 300px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-project-content {
margin-left: 150px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-project-content {
margin-left: 0;
}
}
@media (max-width: 574.98px) {
.tp-project-thumb {
margin-bottom: 30px;
}
}
.tp-project-thumb-wrap {
margin-left: 130px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-project-thumb-wrap {
margin-left: 0;
}
}
.tp-project-thumb-3 {
margin-top: -60px;
}
@media (max-width: 574.98px) {
.tp-project-thumb-3 {
margin-top: 0;
}
}
.tp-project-2-wrap:hover .tp-project-2-thumb img {
transform: scale(1.05);
}
.tp-project-2-wrap:hover .tp-project-2-content {
opacity: 1;
visibility: visible;
bottom: 0;
}
.tp-project-2-thumb {
overflow: hidden;
}
.tp-project-2-thumb img {
transition: all 0.4s ease;
}
.tp-project-2-content {
padding: 35px 50px 30px 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0 0 4px 4px;
background: var(--tp-theme-primary);
bottom: -150px;
left: 0;
right: 0;
margin: 0 auto;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
border-top: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-project-2-content {
padding: 35px 30px 30px 25px;
}
}
.tp-project-2-animate-tab .tab-pane {
display: block;
pointer-events: none;
opacity: 0;
visibility: hidden;
position: absolute;
z-index: 1;
top: 0;
left: 0;
right: 0;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
transition-timing-function: ease-in;
transition-duration: 0.2s;
}
.tp-project-2-animate-tab .tab-pane.active {
pointer-events: auto;
opacity: 1;
visibility: visible;
position: relative;
z-index: 2;
-webkit-transform: none;
-ms-transform: none;
transform: none;
transition-timing-function: ease-out;
transition-duration: 0.3s;
transition-delay: 0.3s;
}
.tp-project-2-tab {
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 31px;
padding-bottom: 20px;
}
.tp-project-2-tab li {
display: inline-block;
margin: 0px 10px;
margin-bottom: 12px;
}
.tp-project-2-tab li a {
font-weight: 500;
font-size: 18px;
color: #e5ebea;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 40px;
padding: 4px 14px;
display: inline-block;
font-style: normal;
}
.tp-project-2-tab li a:hover {
background: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
}
.tp-project-2-tab li a.active {
background: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
}
.tp-project-2-tab li a span {
font-size: 12px;
transform: translateY(-5px);
display: inline-block;
}
.tp-project-4-bg {
padding: 140px 130px 140px 130px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
.tp-project-4-bg {
padding: 100px 30px 100px 30px;
}
}
@media (max-width: 574.98px) {
.tp-project-4-bg {
padding: 50px 15px 0px 15px;
}
}
.tp-project-4-bg .text-right {
float: right;
}
.tp-project-4-para {
backdrop-filter: blur(40px);
--webkit-backdrop-filter: blur(40px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 50%);
width: 440px;
padding: 55px 70px 40px 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-project-4-para {
margin-bottom: 30px;
}
}
@media (max-width: 574.98px) {
.tp-project-4-para {
width: auto;
padding: 25px 15px 10px 15px;
}
}
.tp-project-5-tab {
border-top: 1px solid rgba(31, 49, 48, 0.1);
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-project-5-tab ul li a {
color: var(--tp-grey-1);
border: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-project-5-tab ul li a:hover {
background: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
}
.tp-project-5-wrap .tp-project-2-content {
background: var(--tp-common-white);
border: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-project-6-wrap .tp-project-2-content {
background: var(--tp-grey-3);
}
.tp-project-details-info {
border-radius: 0 0 4px 4px;
background: var(--tp-common-white);
display: flex;
flex-wrap: wrap;
padding: 50px 60px 5px 60px;
}
@media (max-width: 574.98px) {
.tp-project-details-info {
padding: 30px 30px 5px 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-project-details-info-item.mr-115 {
margin-right: 70px;
}
}
.tp-project-details-thumb img {
border-radius: 4px 4px 0 0;
}
.tp-project-details-list ul li {
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 200%;
color: var(--tp-grey-1);
margin-left: 15px;
}
/*----------------------------------------*/
/* 7.18 progress start
/*----------------------------------------*/
.tp-progress-thumb {
max-width: 608px;
height: 100%;
}
.tp-progress-thumb img {
height: 100%;
object-fit: cover;
}
.tp-progress-content {
padding: 100px 80px 100px 70px;
max-width: 530px;
margin-left: -33px;
margin-right: -40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
.tp-progress-content {
padding: 70px 40px 70px 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-progress-content {
margin-left: 0;
margin-right: 0;
max-width: 100%;
}
}
@media (max-width: 574.98px) {
.tp-progress-content {
padding: 50px 12px 50px 12px;
}
}
.tp-progress-bar-wrap {
padding: 100px 80px 100px 70px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
.tp-progress-bar-wrap {
padding: 60px 30px 60px 30px;
}
}
@media (max-width: 574.98px) {
.tp-progress-bar-wrap {
padding: 50px 12px 50px 12px;
}
}
.tp-progress-bar-wrap .progress-bar {
overflow: visible;
display: flex;
flex-direction: column;
justify-content: center;
height: 10px;
border-radius: 9px;
text-align: center;
white-space: nowrap;
background-color: var(--tp-theme-primary);
transition: width 0.6s ease;
position: relative;
margin-top: 3px;
margin-left: 4px;
}
.tp-progress-counter {
position: absolute;
top: -31px;
right: 0;
}
.tp-progress-wrapper {
padding-bottom: 4px;
}
.tp-progress-inner {
border: 1px solid var(--tp-border-1);
width: 100%;
height: 18px;
position: relative;
border-radius: 9px;
line-height: 18px;
}
/*----------------------------------------*/
/* 7.3 benifits start
/*----------------------------------------*/
.tp-benifits-content {
padding-left: 225px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-benifits-content {
padding-left: 125px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-benifits-content {
padding-left: 0;
}
}
.tp-benifits-list ul li {
font-weight: 400;
font-size: 18px;
color: var(--tp-grey-3);
line-height: 26px;
list-style: none;
position: relative;
padding-left: 30px;
margin-bottom: 16px;
}
.tp-benifits-list ul li::before {
position: absolute;
content: "";
background: rgba(255, 255, 255, 0.35);
width: 10px;
height: 10px;
border-radius: 50%;
left: 0;
top: 9px;
}
.tp-benifits-textarea {
height: 100%;
}
.tp-benifits-textarea textarea {
height: 100%;
}
.tp-benifits-form-wrap {
padding: 53px 60px 53px 60px;
margin-left: 115px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-benifits-form-wrap {
margin-left: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-benifits-form-wrap {
margin-left: 0;
}
}
@media (max-width: 574.98px) {
.tp-benifits-form-wrap {
padding: 50px 12px 50px 12px;
}
}
.tp-benifits-form-content .tp-icon {
width: 32px;
height: 32px;
display: inline-block;
line-height: 32px;
text-align: center;
flex: 0 0 auto;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-benifits-form-content p br {
display: none;
}
}
.tp-benifits-btn {
padding: 13px 20px;
}
.tp-benifits-btn:hover {
background: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
}
.tp-benifits-shape {
bottom: 0;
left: 0;
z-index: -1;
}
.tp-benifits-4-year {
border-radius: 4px;
width: 150px;
height: 148px;
display: inline-block;
padding: 25px 10px 10px 10px;
position: absolute;
top: 60px;
right: 85px;
z-index: 2;
}
@media (max-width: 574.98px) {
.tp-benifits-4-year {
top: 20px;
right: 15px;
}
}
.tp-benifits-4-shape {
right: 130px;
bottom: 130px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-benifits-4-shape {
right: 0;
bottom: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-benifits-4-thumb {
margin-right: 0;
}
}
.tp-benifits-4-thumb .thumb-2 {
float: right;
margin-top: -270px;
z-index: 1;
position: relative;
}
@media (max-width: 574.98px) {
.tp-benifits-4-thumb .thumb-2 {
position: inherit;
margin-top: 20px;
}
}
.tp-benifits-4-job .icon {
margin-top: 8px;
}
.tp-benifits-6-thumb {
margin-left: -115px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-benifits-6-thumb {
margin-left: 0;
}
}
.tp-benifits-6-shape {
position: absolute;
bottom: -140px;
left: 80px;
mix-blend-mode: luminosity;
}
/*----------------------------------------*/
/* 7.21 success start
/*----------------------------------------*/
.tp-success-item {
padding: 45px 37px 0px 40px;
}
.tp-success-item:hover .tp-success-btn span {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
}
.tp-success-btn {
transform: translateY(42px);
}
.tp-success-btn span {
width: 90px;
height: 90px;
text-align: center;
line-height: 90px;
transition: all 0.4s ease;
}
.tp-success-btn span::before {
position: absolute;
content: "";
border-radius: 50%;
height: 100%;
width: 100%;
background: var(--tp-common-white);
z-index: -1;
top: 0;
left: 0;
transform: scale(1.4);
}
.tp-success-6-list ul li {
font-weight: 400;
font-size: 16px;
line-height: 162%;
color: var(--tp-grey-1);
padding-left: 15px;
list-style: none;
position: relative;
}
.tp-success-6-list ul li::before {
position: absolute;
content: "";
width: 5px;
height: 5px;
border-radius: 20px;
left: 0;
top: 10px;
background: var(--tp-grey-1);
transition: all 0.4s ease;
}
.tp-success-6-btn {
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.tp-success-6-btn a {
border-radius: 2px;
width: 60px;
height: 60px;
background: var(--tp-grey-3);
display: inline-block;
text-align: center;
line-height: 60px;
}
.tp-success-6-wrap {
padding: 50px 50px 50px 50px;
transition: all 0.4s ease;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-success-6-wrap {
padding: 30px 30px 30px 30px;
}
}
.tp-success-6-wrap:hover {
background: var(--tp-theme-primary);
}
.tp-success-6-wrap:hover h3 {
color: var(--tp-common-white);
}
.tp-success-6-wrap:hover p {
color: var(--tp-common-white);
}
.tp-success-6-wrap:hover .tp-success-6-list ul li {
color: var(--tp-common-white);
}
.tp-success-6-wrap:hover .tp-success-6-list ul li::before {
background: var(--tp-common-white);
}
.tp-success-6-wrap:hover .tp-success-6-btn {
opacity: 1;
visibility: visible;
}
.tp-success-7-content {
border-radius: 4px 0 0 4px;
width: 570px;
backdrop-filter: blur(20px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 100%);
padding: 140px 130px 285px 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-success-7-content {
padding: 90px 90px 90px 90px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-success-7-content {
width: 100%;
}
}
@media (max-width: 574.98px) {
.tp-success-7-content {
padding: 30px 30px 30px 30px;
}
}
.tp-success-7-spacing {
margin-top: -220px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-success-7-spacing {
margin-top: 0;
}
}
.tp-success-7-wrap {
margin-left: -32px;
border-radius: 4px 0 0 4px;
}
@media (max-width: 574.98px) {
.tp-success-7-wrap {
margin-left: 0;
}
}
.tp-success-8-percent {
font-weight: 600;
font-size: 50px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--tp-theme-primary);
}
.tp-success-8-list ul li {
font-weight: 400;
font-size: 16px;
color: var(--tp-theme-primary);
list-style: none;
}
.tp-success-8-list ul li:not(:last-child) {
margin-bottom: 10px;
}
.tp-success-8-list ul li i {
margin-right: 12px;
font-size: 14px;
}
.tp-success-8-border {
border-radius: 4px;
width: 182px;
height: 8px;
background: var(--tp-theme-primary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-success-8-chart {
margin-left: 0;
}
}
@media (max-width: 574.98px) {
.tp-success-8-content h2 br {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-success-8-thumb {
margin-right: 0;
}
}
.tp-success-service-item .tp-success-btn span::before {
background: var(--tp-common-white-2);
}
/*----------------------------------------*/
/* 7.22 team start
/*----------------------------------------*/
.tp-team-count {
font-size: 140px;
}
.tp-team-shape {
top: 180px;
mix-blend-mode: screen;
}
.tp-team-thumb {
margin-top: -90px;
text-align: right;
margin-right: -65px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-team-thumb {
margin-right: 0;
}
}
.tp-team-2-social {
position: absolute;
bottom: 30px;
left: 40px;
z-index: 2;
}
.tp-team-2-social ul li {
list-style: none;
}
.tp-team-2-social .list-wrap {
display: none;
}
.tp-team-2-social a {
margin-bottom: 5px;
border-radius: 100px;
width: 45px;
height: 45px;
text-align: center;
line-height: 45px;
display: inline-block;
font-size: 22px;
color: var(--tp-common-white);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
}
.tp-team-2-social a svg {
transform: translateY(-2px);
}
.tp-team-2-social a:hover {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
}
.tp-team-2-social a,
.tp-team-2-social .icons {
-webkit-transition: 0.3s cubic-bezier(0.12, 0, 0.39, 0);
transition: 0.3s cubic-bezier(0.12, 0, 0.39, 0);
z-index: 1;
}
.tp-team-2-social a:hover,
.tp-team-2-social .icons:hover {
color: var(--tp-common-white);
}
.tp-team-2-social a:hover span,
.tp-team-2-social .icons:hover span {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.tp-team-2-social a span,
.tp-team-2-social .icons span {
display: block;
border-radius: 100%;
height: 100%;
width: 100%;
top: -1px;
left: -1px;
padding: 1px;
box-sizing: content-box;
margin: 0;
position: absolute;
-webkit-transform: scale(1.2);
transform: scale(1.2);
opacity: 0;
-webkit-transition: 0.5s cubic-bezier(0.12, 0, 0.39, 0);
transition: 0.5s cubic-bezier(0.12, 0, 0.39, 0);
pointer-events: none;
z-index: -1;
background-color: var(--tp-theme-primary);
}
.tp-team-2-social .social-toggle-icon {
width: 45px;
height: 45px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 22px;
color: var(--tp-common-white);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(30px);
}
.tp-team-2-thumb img {
transition: all 0.4s ease;
border-radius: 4px 4px 0 0;
}
.tp-team-2-wrap {
background-color: var(--tp-common-white-2);
border: 1px solid #cecece;
border-radius: 5px 5px 0 0;
}
.tp-team-2-thumb::before {
/* position: absolute;
bottom: 0;
content: "";
left: 0;
background: linear-gradient(180deg, rgba(31, 49, 48, 0) 0%, rgba(31, 49, 48, 0.85) 100%);
width: 100%;
height: 100%;
border-radius: 4px;
z-index: 1;
opacity: 0;
transition: all 0.4s ease; */
}
.tp-team-2-wrap:hover .tp-team-2-thumb::before {
opacity: 1;
}
.tp-team-2-wrap:hover .tp-team-2-thumb img {
transform: scale(1.1);
}
.tp-team-4-image-wrapper {
width: 100%;
height: 480px;
border-radius: 4px;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.tp-team-4-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
transition: all 0.3s ease-in-out;
mix-blend-mode: luminosity;
}
.tp-team-4-toggle-text {
opacity: 0;
margin-top: -150px;
font-size: 16px;
line-height: 26px;
color: var(--tp-theme-primary);
}
.tp-team-4-toggle-text.show {
margin-top: 20px;
opacity: 1;
}
.tp-team-4-toggle-btn i {
width: 48px;
height: 48px;
display: inline-block;
text-align: center;
line-height: 48px;
border-radius: 100%;
fill: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(30px);
color: var(--tp-common-white);
position: absolute;
top: 65%;
right: 30px;
transition: all 0.4s ease;
}
.tp-team-4-toggle-btn i.active {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
}
.tp-team-4-toggle-btn i:hover {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
}
.tp-team-4-wrap {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 614px;
border-bottom: 1px solid rgba(31, 49, 48, 0.15);
padding-bottom: 20px;
}
.tp-team-4-wrap:hover .tp-team-4-image-wrapper img {
mix-blend-mode: normal;
}
.tp-team-4-title {
font-weight: 500;
font-size: 24px;
letter-spacing: -0.02em;
color: var(--tp-theme-primary);
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-4-title-wrap p br {
display: none;
}
}
.tp-team-4-subtitle {
font-weight: 400;
font-size: 16px;
display: inline-block;
color: var(--tp-grey-1);
}
.tp-team-4-social {
text-align: right;
}
.tp-team-4-social a {
font-weight: 500;
font-size: 16px;
letter-spacing: -0.02em;
text-align: center;
color: var(--tp-grey-1);
width: 40px;
height: 40px;
display: inline-block;
border-radius: 50%;
line-height: 40px;
}
.tp-team-4-social a:hover {
background: #e5ebea;
}
.tp-team-4-title-wrap {
position: sticky;
top: 100px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-4-main-wrap {
margin-left: 0;
}
}
.tp-team-5-top {
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding-bottom: 15px;
margin-bottom: 45px;
}
.tp-team-5-avatar {
overflow: hidden;
border-radius: 50%;
}
.tp-team-5-avatar img {
mix-blend-mode: luminosity;
transition: all 0.4s ease;
}
.tp-team-5-item:hover .tp-team-5-avatar img {
mix-blend-mode: normal;
transform: scale(1.07);
}
.tp-team-5-thumb-inner {
float: right;
padding-bottom: 60px;
}
.tp-team-2-content {
padding-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-5-thumb-inner {
width: 200px;
}
}
.tp-team-details-content {
margin-left: 40px;
margin-right: 80px;
}
.tp-team-details-content p {
text-align: justify;
}
.tp-team-details-content h2 {
/* font-family: 'Great Vibes', cursive; */
font-size: 30px;
font-weight: 400;
background: #00499B;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0;
}
.tp-blog-content a:hover {
color: #00499b;
}
.tp-team-details-content span {
font-size: 18px;
font-weight: 600;
color: #000;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-details-content {
margin-right: 0;
margin-left: 0;
}
}
/* .tp-team-details-info ul{
display: grid;
grid-template-columns: 2fr 2fr;
list-style: none;
padding: 0;
margin: 0;
} */
.tp-team-details-info ul li {
font-weight: 600;
font-size: 16px;
display: flex;
letter-spacing: -0.02em;
/* color: var(--tp-theme-primary); */
color: #000000;
list-style: none;
border-top: 1px solid rgba(31, 49, 48, 0.1);
margin-top: -1px;
padding: 11px 0px;
}
.tp-team-details-info ul li span {
display: inline-block;
margin-right: 6px;
}
.tp-team-details-info ul li p {
font-weight: 500;
color: #00499b;
}
.tp-team-details-ratings-wrap {
background: #e5ebea;
border-radius: 30px;
padding: 15px 15px 15px 15px;
margin-top: 33px;
}
.tp-team-details-ratings-wrap .ratings {
font-weight: 500;
font-size: 16px;
color: var(--tp-common-white);
width: 65px;
background: var(--tp-theme-primary);
display: inline-block;
border-radius: 60px;
text-align: center;
}
.tp-team-details-ratings-wrap .ratings i {
color: var(--tp-common-yellow);
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-expreance-title-wrap br {
display: none;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-expreance-right {
margin-right: 0;
}
}
.tp-team-expreance-timeline {
border-right: 1px solid var(--tp-theme-primary);
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-expreance-timeline {
padding-right: 30px;
}
}
.tp-team-expreance-timeline-item {
position: relative;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-expreance-timeline-item {
margin-bottom: 50px;
}
}
.tp-team-expreance-timeline-item::before {
position: absolute;
content: "";
width: 11px;
height: 11px;
border-radius: 30px;
background: var(--tp-theme-primary);
right: -116px;
top: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-team-expreance-timeline-item::before {
right: -36px;
}
}
.small {
width: 140px;
height: 140px;
border-radius: 50%;
}
/*----------------------------------------*/
/* 7.10 faq start
/*----------------------------------------*/
.tp-faq-right {
/* border-radius: 4px 0px 0px 4px; */
margin-left: -20px;
}
.tp-faq-content {
padding-left: 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-content {
padding-left: 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-height {
height: auto !important;
}
}
.tp-faq-thumb {
margin-right: 20px;
height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-thumb {
margin-right: 0;
}
}
.tp-faq-thumb img {
border-radius: 0px 4px 4px 0px;
height: 100%;
object-fit: contain;
}
.tp-faq-wrapper {
padding-right: 130px;
margin-left: 20px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-faq-wrapper {
padding-right: 30px;
margin-left: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-wrapper {
padding-right: 12px;
padding-left: 12px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-faq-wrapper {
padding-left: 12px;
}
}
.tp-faq-wrapper .accordion-button.tp-faq-btn-2 {
font-weight: 500;
font-size: 18px;
letter-spacing: -0.02em;
color: var(--tp-common-white);
background: transparent;
padding: 20px 30px;
padding-right: 53px;
}
.tp-faq-wrapper .accordion-button.tp-faq-btn-2:focus {
box-shadow: none;
}
.tp-faq-wrapper .accordion-button:not(.collapsed) {
box-shadow: none;
color: var(--tp-common-white);
}
.tp-faq-wrapper .accordion-button:not(.collapsed) .accordion-btn::before {
-webkit-transform: translateX(-50%) rotate(90deg);
-moz-transform: translateX(-50%) rotate(90deg);
-ms-transform: translateX(-50%) rotate(90deg);
-o-transform: translateX(-50%) rotate(90deg);
transform: translateX(-50%) rotate(90deg);
background-color: var(--tp-theme-secondary);
}
.tp-faq-wrapper .accordion-button:not(.collapsed) .accordion-btn::after {
background-color: var(--tp-common-white);
}
.tp-faq-wrapper .accordion-button::after {
display: none;
}
.tp-faq-wrapper .accordion-body {
padding: 0px 120px 35px 30px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
(max-width: 574.98px) {
.tp-faq-wrapper .accordion-body {
padding: 0px 30px 35px 30px;
}
}
.tp-faq-wrapper .accordion-btn {
position: absolute;
top: 50%;
right: 30px;
transform: translateY(-50%);
display: inline-block;
width: 12px;
height: 12px;
}
.tp-faq-wrapper .accordion-btn::after {
position: absolute;
content: "";
width: 100%;
height: 2px;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: var(--tp-common-white);
border-radius: 2px;
transition: all 0.4s ease;
}
.tp-faq-wrapper .accordion-btn::before {
position: absolute;
content: "";
width: 2px;
height: 100%;
left: 50%;
top: 0;
background-color: var(--tp-common-white);
transform: translateX(-50%);
border-radius: 2px;
transition: all 0.4s ease;
}
.tp-faq-wrapper .accordion-item {
background: rgba(255, 255, 255, 0.04);
border-radius: 4px;
border: none;
}
.tp-faq-wrapper .tp-faq-details-para p {
color: var(--tp-grey-3);
margin-bottom: 0;
font-size: 14px;
}
.tp-faq-2-author-ratings {
backdrop-filter: blur(40px);
background: linear-gradient(140deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
display: inline-block;
border-radius: 15px;
padding: 2px 12px;
}
.tp-faq-2-author-ratings span i {
color: #fdc93a;
font-size: 12px;
}
.tp-faq-2-wrap .tp-border {
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.tp-faq-2-wrap .tp-faq-wrapper {
margin-left: 0;
}
.tp-faq-2-wrap .tp-faq-content {
padding: 43px 60px 43px 60px;
margin-right: 10px;
margin-left: 30px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-2-wrap .tp-faq-content {
margin-right: 0;
margin-left: 0;
padding: 43px 30px 43px 30px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-faq-2-wrap .tp-faq-content {
margin-right: -35px;
}
}
.tp-faq-2-wrap .tp-faq-thumb {
margin-right: 0;
}
.tp-faq-2-wrap .tp-faq-wrapper .accordion-button {
border: 1px solid rgba(31, 49, 48, 0.08);
border-radius: 4px;
color: var(--tp-theme-primary);
}
.tp-faq-2-wrap .tp-faq-wrapper .accordion-button:not(.collapsed) {
background: var(--tp-common-white);
color: var(--tp-theme-primary);
border-color: var(--tp-common-white);
}
.tp-faq-2-wrap .tp-faq-wrapper .accordion-body {
background: var(--tp-common-white);
}
.tp-faq-2-wrap .tp-faq-wrapper .tp-faq-details-para {
border-radius: 0px 0px 4px 4px;
}
.tp-faq-2-wrap .tp-faq-wrapper .tp-faq-details-para p {
color: #506767;
}
.tp-faq-2-wrap .tp-faq-wrapper .accordion-btn::before {
background-color: var(--tp-theme-primary);
}
.tp-faq-2-wrap .tp-faq-wrapper .accordion-btn::after {
background-color: var(--tp-theme-primary);
}
.tp-faq-2-wrap .tp-faq-wrapper .accordion-button:not(.collapsed) .accordion-btn::before {
background-color: var(--tp-theme-primary);
}
.tp-faq-2-wrap .tp-faq-wrapper .accordion-button:not(.collapsed) .accordion-btn::after {
background-color: var(--tp-theme-primary);
}
.tp-faq-3-links-inner {
border-radius: 4px;
width: 260px;
backdrop-filter: blur(40px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%);
padding: 30px 30px 12px 30px;
}
.tp-faq-3-wrapper {
padding-right: 0;
margin-left: 65px !important;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-3-wrapper {
margin-left: 0 !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-3-wrapper {
padding-left: 0;
}
}
.tp-faq-3-wrapper .accordion-button {
padding-right: 27px !important;
z-index: 1;
}
.tp-faq-3-wrapper .accordion-button::after {
display: inline-block;
content: "\f107";
font-family: var(--tp-ff-fontawesome);
background-image: none;
width: auto;
height: auto;
}
.tp-faq-3-wrapper .accordion-button::before {
position: absolute;
content: "";
width: 40px;
right: 15px;
height: 40px;
background: #f8d0b3;
color: var(--tp-common-black);
z-index: -1;
border-radius: 50px;
}
.tp-faq-3-wrapper .accordion-button:not(.collapsed)::after {
color: var(--tp-common-white);
}
.tp-faq-3-wrapper .accordion-button:not(.collapsed)::before {
background: var(--tp-theme-primary);
}
.tp-faq-3-subtitle {
position: absolute;
top: -12px;
left: 40px;
padding: 3px 10px;
display: inline-block;
background: #f6f6f6;
}
.tp-faq-3-subtitle-2 {
position: absolute;
top: -12px;
left: 40px;
padding: 3px 10px;
display: inline-block;
background: #f6f6f6;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-3-wrap {
margin-right: 0;
}
}
.tp-faq-3-wrap .tp-faq-wrapper .accordion-button {
border: none;
}
.tp-faq-3-wrap .tp-faq-wrapper .accordion-button:not(.collapsed) {
background: none;
}
.tp-faq-3-wrap .tp-faq-wrapper .accordion-body {
background: none;
}
.tp-faq-3-wrap .tp-faq-wrapper .accordion-item {
border: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-faq-3-wrap .tp-faq-wrapper .accordion-button.tp-faq-btn-2 {
padding: 25px 30px;
font-size: 20px;
}
.tp-faq-3-wrap .tp-faq-wrapper .accordion-button:not(.collapsed) .tp-faq-3-subtitle {
display: inline-block !important;
}
.tp-faq-3-wrap .tp-faq-wrapper .accordion-button:not(.collapsed) .tp-faq-3-subtitle-2 {
display: none;
}
@media (max-width: 574.98px) {
.tp-faq-3-title-wrap {
margin-right: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-4-thumb .thumb {
margin-right: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-4-thumb .thumb {
margin-bottom: 100px;
}
}
.tp-faq-4-thumb-shape {
border-radius: 4px;
width: 82%;
height: 100%;
display: inline-block;
background: var(--tp-theme-secondary);
z-index: -1;
left: 0;
bottom: -30px;
}
.tp-faq-4-wrapper {
padding-right: 0;
margin-left: 0;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-4-wrapper {
padding-left: 0;
}
}
.tp-faq-4-wrapper .accordion-button.tp-faq-btn-2 {
font-size: 24px;
color: var(--tp-theme-primary);
padding: 24px 30px;
}
@media (max-width: 574.98px) {
.tp-faq-4-wrapper .accordion-button.tp-faq-btn-2 {
padding: 24px 15px;
}
}
.tp-faq-4-wrapper .accordion-button.tp-faq-btn-2 span {
color: var(--tp-grey-1);
display: inline-block;
margin-right: 40px;
}
@media (max-width: 574.98px) {
.tp-faq-4-wrapper .accordion-button.tp-faq-btn-2 span {
margin-right: 10px;
}
}
.tp-faq-4-wrapper .tp-faq-details-para p {
color: var(--tp-grey-1);
font-size: 16px;
}
.tp-faq-4-wrapper .accordion-body {
padding: 0px 40px 35px 97px;
}
@media (max-width: 574.98px) {
.tp-faq-4-wrapper .accordion-body {
padding: 0px 20px 35px 40px;
}
}
.tp-faq-4-wrapper .accordion-item {
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 0;
}
.tp-faq-4-wrapper .accordion-item.expand {
background: linear-gradient(180deg, #e5ebea 0%, #f6f6f6 100%);
border-radius: 4px;
border: transparent;
}
.tp-faq-5-wrapper {
border: 1px solid rgba(31, 49, 48, 0.08);
padding: 60px 60px 60px 60px;
margin-right: -60px;
margin-left: 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-5-wrapper {
margin-left: 0;
margin-right: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px) {
.tp-faq-5-wrapper {
padding: 30px 30px 30px 30px;
}
}
@media (max-width: 574.98px) {
.tp-faq-5-wrapper {
border: none;
padding: 0;
}
}
.tp-faq-5-wrapper .tp-faq-wrapper {
padding-right: 0;
margin-left: 0;
}
@media (max-width: 574.98px) {
.tp-faq-5-wrapper .tp-faq-wrapper {
padding-left: 0;
}
}
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-button {
border-left: 0;
border-radius: 0;
border-right: 0;
margin-top: -1px;
padding-right: 30px;
padding-left: 53px;
font-size: 20px;
}
@media (max-width: 574.98px) {
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-button {
padding-left: 25px;
padding-right: 10px;
}
}
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-button:hover {
background: var(--tp-common-white-2);
}
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-button:not(.collapsed) {
border-top: 1px solid rgba(31, 49, 48, 0.08);
}
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-btn {
right: auto;
left: 25px;
}
@media (max-width: 574.98px) {
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-btn {
left: 0;
}
}
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-body {
padding: 0px 50px 35px 55px;
}
@media (max-width: 574.98px) {
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-body {
padding: 0px 20px 25px 25px;
}
}
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-btn::before {
background-color: var(--tp-grey-1);
}
.tp-faq-5-wrapper .tp-faq-wrapper .accordion-btn::after {
background-color: var(--tp-grey-1);
}
.tp-faq-6-wrap .tp-faq-3-subtitle {
background: var(--tp-grey-3);
}
.tp-faq-6-wrap .tp-faq-3-subtitle-2 {
background: var(--tp-grey-3);
}
.tp-faq-6-wrap .accordion-button.tp-faq-btn-2 {
padding: 23px 30px !important;
}
.tp-faq-6-wrap .accordion-button::before {
position: absolute;
content: "";
width: 40px;
right: 17px;
height: 40px;
background: #228ca640;
color: var(--tp-common-black);
z-index: -1;
border-radius: 50px;
}
.tp-faq-details-wrapper .tp-faq-3-subtitle-2 {
background: var(--tp-common-white-2);
}
.tp-faq-details-wrapper .tp-faq-3-subtitle {
background: var(--tp-common-white-2);
}
.tp-faq-details-item {
display: flex;
align-items: center;
}
.tp-faq-details-icon {
border-radius: 100%;
background: rgba(255, 255, 255, 0.1);
width: 40px;
height: 40px;
display: inline-block;
text-align: center;
line-height: 40px;
flex: 0 0 auto;
}
.tp-faq-details-thumb {
padding: 50px 60px 60px 60px;
}
@media (max-width: 574.98px) {
.tp-faq-details-thumb {
padding: 20px 20px 20px 20px;
}
}
.tp-faq-details-main .tp-success-btn span::before {
background: var(--tp-common-white-2);
}
.tp-faq-check {
margin-left: 65px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-faq-check {
margin-left: 0;
}
}
.tp-faq-check .tp-faq-5-wrapper {
margin-left: 0;
margin-right: 0;
}
.tp-faq-check .tp-faq-2-wrap .tp-faq-wrapper .accordion-body {
background: var(--tp-common-white-2);
}
.tp-faq-check .tp-faq-2-wrap .tp-faq-wrapper .accordion-button:not(.collapsed) {
background: var(--tp-common-white-2);
border-color: var(--tp-common-white-2);
}
.tp-faq-check .tp-faq-5-wrapper .tp-faq-wrapper .accordion-button:not(.collapsed) {
border-top: 1px solid rgba(31, 49, 48, 0.08);
}
.tp-border-middle {
position: relative;
}
.tp-border-middle::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
background: rgba(31, 49, 48, 0.1);
top: 0;
left: 50%;
transform: translateX(-50%);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-border-middle::before {
display: none;
}
}
/*----------------------------------------*/
/* 7.4 brand start
/*----------------------------------------*/
.tp-brands-area {
border-top: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-brands-wrap ul {
column-count: 5;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-brands-wrap ul {
column-count: 2;
}
}
.tp-brands-wrap ul li {
text-align: center;
list-style: none;
}
.tp-brands-wrap ul li:not(:last-child) {
border-right: 1px solid rgba(31, 49, 48, 0.1);
}
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-brands-wrap ul li:not(:last-child) {
/* border: none; */
}
}
.tp-brands-wrap ul li a img {
padding: 72px 20px;
display: block;
margin: 0 auto;
height: 200px;
object-fit: contain;
/* opacity: 45%;
mix-blend-mode: luminosity; */
transition: all 0.4s ease;
}
.tp-brands-wrap ul li a span {
display: block;
font-size: 1rem;
font-weight: 600;
color: rgb(255, 255, 255);
letter-spacing: 1px;
background-color: #00499B;
text-transform: uppercase;
padding: 10px;
margin-top: 10px;
transition: all 0.3s ease;
}
/* @media (max-width: 574.98px) {
.tp-brands-wrap ul li a img{
padding: 30px 20px;
}
} */
.tp-brands-wrap ul li a:hover {
/* mix-blend-mode: normal;
opacity: 100%; */
}
.tp-brands-2-border {
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-brands-3-wrap {
padding-top: 100px;
padding-bottom: 100px;
}
.tp-brands-3-wrap ul {
column-count: 6;
}
.tp-brands-3-wrap ul li:not(:last-child) {
border-right: 0;
}
.tp-brands-3-slider-active .swiper-slide {
width: 250px;
}
.tp-brands-3-slider-active .swiper-slide a {
opacity: 45%;
filter: saturate(0);
transition: all 0.4s ease;
display: inline-block;
}
.tp-brands-3-slider-active .swiper-slide a:hover {
filter: saturate(1);
opacity: 100%;
}
.tp-brands-6-wrap .tp-brands-3-slider-inner {
border-radius: 4px;
background: var(--tp-common-white);
}
.tp-brands-6-wrap .swiper-slide {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.tp-brands-6-wrap .swiper-slide a {
padding: 60px 20px;
}
.tp-brands-6-wrap .swiper-slide::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
right: -15px;
top: 0;
background: rgba(31, 49, 48, 0.08);
}
/*----------------------------------------*/
/* 7.16 pricing start
/*----------------------------------------*/
.tp-pricing-thumb img {
border-radius: 4px 4px 0px 0px;
}
.tp-pricing-content {
padding: 35px 55px 48px 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-pricing-content {
padding: 30px 28px 30px 30px;
}
}
.tp-pricing-wrap {
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 4px;
}
.tp-pricing-wrap-2 {
padding: 60px 60px 60px 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-pricing-wrap-2 {
padding: 30px 28px 30px 30px;
}
}
.tp-pricing-wrap-2 .tp-service-content {
padding: 0px;
}
.tp-pricing-wrap-2 .tp-service-content ul li i {
background: var(--tp-common-white);
}
.tp-pricing-wrap-3 {
padding: 60px 48px 60px 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-pricing-wrap-3 {
padding: 30px 28px 30px 30px;
}
}
.tp-pricing-wrap-3 .tp-service-content {
padding: 0px;
}
.tp-pricing-wrap-3 .tp-border-bottom {
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.tp-pricing-icon {
border-radius: 4px;
width: 120px;
height: 120px;
text-align: center;
line-height: 120px;
}
.tp-pricing-icon-2 {
width: 120px;
}
.tp-pricing-5-btn {
padding: 13px 10px;
border: 1px solid transparent;
}
.tp-pricing-5-btn:hover {
border: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-pricing-5-btn.btn-transparent {
border: 1px solid rgba(31, 49, 48, 0.1);
}
.tp-pricing-5-btn-bottom {
border-top: 1px solid rgba(31, 49, 48, 0.1);
padding-top: 22px;
}
.tp-pricing-5-item {
border: 1px solid rgba(31, 49, 48, 0.1);
padding: 45px 50px 40px 50px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-pricing-5-item {
padding: 25px 30px 20px 30px;
}
}
.tp-pricing-5-item.active .btn-transparent {
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tp-pricing-5-item.active .tp-pricing-5-list ul li {
color: var(--tp-common-white);
}
.tp-pricing-5-item.active .tp-pricing-5-list ul li i {
background: rgba(255, 255, 255, 0.1);
color: var(--tp-common-white);
}
.tp-pricing-5-item.active .tp-pricing-5-btn-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.tp-pricing-5-list ul li {
font-weight: 400;
font-size: 16px;
color: var(--tp-theme-primary);
list-style: none;
margin-bottom: 12px;
display: flex;
}
.tp-pricing-5-list ul li i {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 14px;
background: var(--tp-common-white);
border-radius: 30px;
color: var(--tp-theme-primary);
margin-right: 10px;
flex: 0 0 auto;
transform: translateY(5px);
}
.tp-pricing-8-item {
padding: 30px 40px 30px 40px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 574.98px) {
.tp-pricing-8-item {
padding: 20px 20px 20px 20px;
}
}
/*----------------------------------------*/
/* 7.5 pricing start
/*----------------------------------------*/
.tp-chose-middle {
bottom: -52px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 2;
}
.tp-chose-middle-title {
padding: 100px 60px 0px 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-middle-title {
padding: 40px 60px 0px 60px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-middle-title {
padding: 30px 30px 0px 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-middle-title h4 {
color: var(--tp-common-white);
}
}
@media (max-width: 574.98px) {
.tp-chose-middle-title h4 {
margin-bottom: 26px;
font-size: 20px;
}
}
.tp-chose-middle-content {
border-radius: 4px;
margin-right: 100px;
border: 2px solid white;
backdrop-filter: blur(3px);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-middle-content {
margin-right: 50px;
}
}
@media (max-width:768px) {
.tp-chose-list {
margin-bottom: 30px;
}
}
.tp-chose-middle-content a {
padding: 13px 60px;
}
.tp-chose-list ul li {
font-weight: 400;
font-size: 16px;
line-height: 187%;
color: var(--tp-common-black);
list-style: none;
margin-bottom: 9px;
display: flex;
}
.tp-chose-list ul li i {
width: 20px;
height: 20px;
background: var(--tp-common-white-2);
color: var(--tp-theme-secondary);
border-radius: 50%;
text-align: center;
line-height: 21px;
font-size: 12px;
flex: 0 0 auto;
margin-right: 10px;
transform: translateY(5px);
}
.tp-chose-work {
column-count: 2;
margin-right: 150px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-work {
margin-right: 0;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-work {
column-count: 1;
}
}
.tp-chose-wrapper {
border-right: 1px solid rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-wrapper {
margin-right: 15px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-wrapper {
margin-right: 0;
border-right: 0;
}
}
.tp-chose-wrapper .tp-border {
height: 1px;
width: 100%;
display: block;
background: rgba(255, 255, 255, 0.15);
}
.tp-chose-content {
margin-right: -160px;
margin-left: 103px;
}
@media only screen and (min-width: 1600px) and (max-width: 1700px),
only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-content {
margin-right: 0;
margin-left: 50px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-content {
margin-left: 0;
}
}
.tp-chose-shape-2 {
top: 50%;
transform: translateY(-50%);
left: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-thumb.thumb-2 {
height: 300px !important;
}
.tp-chose-thumb.thumb-2 img {
object-fit: cover;
}
}
.tp-chose-3-awards {
padding: 50px 80px 54px 60px;
margin-left: 23px;
margin-right: -53px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-chose-3-awards {
padding: 50px 40px 54px 60px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-3-awards {
padding: 50px 30px 54px 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-3-awards {
margin-left: 0;
margin-right: 0;
}
}
.tp-chose-3-awards .tp-service-content {
padding: 0px;
}
.tp-chose-3-awards .awards {
mix-blend-mode: luminosity;
}
.tp-chose-3-awards ul li:not(:last-child) {
margin-bottom: 12px;
}
.tp-chose-3-awards ul li i {
background: var(--tp-common-white);
}
.tp-chose-3-title-wrap {
margin-right: 50px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-3-title-wrap {
margin-right: 0;
}
}
.tp-chose-3-slider {
margin-left: 53px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-3-slider {
margin-left: 0;
}
}
.tp-chose-3-slider-content {
padding: 55px 60px 88px 60px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-3-slider-content {
padding: 35px 30px 65px 30px;
}
}
.tp-chose-3-slider .tp-testimonial-2-navigation {
right: 60px;
bottom: 40px;
}
.tp-chose-3-slider .tp-testimonial-2-navigation span {
width: 30px;
height: 30px;
line-height: 25px;
border: 1px solid rgba(255, 255, 255, 0.15);
}
.tp-chose-3-slider .tp-testimonial-2-navigation span:hover {
background: var(--tp-theme-secondary);
color: var(--tp-theme-primary);
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-chose-3-top img {
height: 250px;
object-fit: cover;
}
}
/*----------------------------------------*/
/* 7.24 video start
/*----------------------------------------*/
.tp-video-wrap {
padding-top: 190px;
padding-bottom: 190px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-video-wrap {
padding-top: 90px;
padding-bottom: 90px;
}
}
.tp-video-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.tp-video-3-wrap .tp-video-bottom {
backdrop-filter: blur(5px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 50%);
border: none;
}
.tp-video-7-wrap {
height: 100%;
}
.tp-video-7-wrap img {
height: 100%;
object-fit: cover;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-video-7-wrap {
margin-right: 0;
}
}
.tp-video-7-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin: 0 auto;
}
.tp-video-8-overly {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(31, 49, 48, 0.65);
z-index: 2;
}
.tp-video-8-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.tp-video-8-background-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.tp-video-8-wrap {
padding-top: 265px;
padding-bottom: 265px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
.tp-video-8-wrap {
padding-top: 190px;
padding-bottom: 190px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-video-8-wrap {
padding-top: 90px;
padding-bottom: 90px;
}
}
/*----------------------------------------*/
/* 7.2 banner start
/*----------------------------------------*/
.tp-banner-content {
padding: 70px 50px 50px 75px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-banner-content {
padding: 70px 50px 50px 35px;
}
}
.tp-banner-content ul li {
list-style: none;
font-size: 16px;
color: var(--tp-grey-1);
margin-bottom: 10px;
display: flex;
align-items: center;
}
.tp-banner-content ul li i {
width: 20px;
height: 20px;
color: var(--tp-grey-1);
border: 1px solid rgba(31, 49, 48, 0.15);
border-radius: 50%;
text-align: center;
line-height: 20px;
font-size: 12px;
flex: 0 0 auto;
margin-right: 10px;
}
/*----------------------------------------*/
/* 7.7 counter start
/*----------------------------------------*/
.tp-counter-3-wrap {
padding: 44px 100px 75px 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-counter-3-wrap {
padding: 34px 40px 35px 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-counter-3-wrap.md-space {
margin-top: 0;
}
.tp-counter-3-wrap.md-space-b {
margin-bottom: 30px;
}
}
.tp-counter-3-border {
position: relative;
}
.tp-counter-3-border::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
background: rgba(31, 49, 48, 0.1);
top: 0;
right: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-counter-3-border::before {
display: none;
}
}
.tp-counter-5-wrap {
transition: all 0.4s ease;
padding: 40px 10px 33px 10px;
}
.tp-counter-5-wrap:hover {
background: var(--tp-grey-3);
}
.tp-counter-7-item {
padding: 60px 50px 47px 60px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-counter-7-item {
padding: 30px 30px 27px 30px;
}
}
.tp-counter-7-item-border {
border-radius: 4px 0 0 4px;
}
.tp-counter-7-item-border-2 {
border-radius: 0 4px 4px 0;
}
.tp-counter-7-spacing {
margin-top: -130px;
}
/*----------------------------------------*/
/* 7.17 progress start
/*----------------------------------------*/
.tp-process-3-tab-wrap {
border-top: 1px solid rgba(31, 49, 48, 0.1);
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
padding-top: 10px;
}
.tp-process-3-tab ul li {
list-style: none;
display: inline-block;
margin-bottom: 10px;
}
.tp-process-3-tab ul li a {
font-weight: 500;
font-size: 18px;
letter-spacing: -0.02em;
color: var(--tp-theme-primary);
border-radius: 4px;
display: inline-block;
padding: 17px 59px;
transition: all 0.4s ease;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-3-tab ul li a {
padding: 17px 40px;
}
}
.tp-process-3-tab ul li a.active {
background: #e5ebea;
}
.tp-process-3-tab ul li a:hover {
background: #e5ebea;
}
.tp-process-3-counter {
padding: 65px 80px 45px 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-process-3-counter {
margin-right: 20px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-3-counter {
margin-right: 0;
margin-bottom: 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-3-counter {
padding: 35px 30px 25px 30px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
.tp-process-3-thumb {
margin-left: 20px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-3-thumb {
margin-left: 0;
}
}
@media (max-width: 574.98px) {
.tp-process-3-thumb {
margin-top: 40px;
}
}
.tp-process-3-thumb .thumb {
width: 220px;
flex: 0 0 auto;
overflow: hidden;
border-radius: 50%;
}
@media (max-width: 574.98px) {
.tp-process-3-thumb .thumb {
margin-bottom: 30px;
}
}
.tp-process-3-thumb img {
border-radius: 50%;
transition: all 0.4s ease;
}
.tp-process-3-thumb:hover .tp-process-3-counts {
background: var(--tp-theme-primary);
}
.tp-process-3-thumb:hover .thumb img {
transform: scale(1.07);
}
.tp-process-3-counts {
font-weight: 500;
font-size: 26px;
letter-spacing: -0.02em;
color: var(--tp-common-white);
border-radius: 40px;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
display: inline-block;
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: 0 auto;
transform: translateY(-50%);
backdrop-filter: blur(40px);
transition: all 0.4s ease;
background: linear-gradient(209deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.4) 100%);
}
.tp-process-4-wrap {
padding: 55px 60px 60px 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-4-wrap {
padding: 35px 20px 20px 20px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-4-thumb img {
width: 100%;
}
}
.tp-process-5-border {
border-top: 1px solid rgba(31, 49, 48, 0.1);
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
padding-top: 10px;
}
.tp-process-5-tab ul li a.active {
background: var(--tp-common-white-2);
}
.tp-process-5-tab ul li a:hover {
background: var(--tp-common-white-2);
}
@media (max-width: 574.98px) {
.tp-process-5-wrap .tp-process-3-thumb {
margin-top: 0;
}
.tp-process-5-wrap .tp-process-3-tab-bottom {
padding-top: 40px;
}
}
.tp-process-7-content {
padding-right: 350px;
padding-left: 100px;
}
@media only screen and (min-width: 1700px) and (max-width: 1800px) {
.tp-process-7-content {
padding-right: 200px;
}
}
@media only screen and (min-width: 1600px) and (max-width: 1700px) {
.tp-process-7-content {
padding-right: 150px;
}
}
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.tp-process-7-content {
padding-right: 100px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-7-content {
padding-right: 20px;
padding-left: 50px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-7-content {
padding-left: 0px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-7-content {
padding-left: 30px;
}
}
.tp-process-7-thumb img {
height: 100%;
object-fit: cover;
}
.tp-process-7-list {
direction: ltr;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-7-list {
padding-left: 30px;
}
}
.tp-process-7-list-wrap {
height: 580px;
overflow-y: scroll;
direction: rtl;
}
.tp-process-7-list-wrap::-webkit-scrollbar {
width: 9px;
}
.tp-process-7-list-wrap::-webkit-scrollbar-track {
background: #f6f6f6;
border-radius: 10px;
width: 3px;
}
.tp-process-7-list-wrap::-webkit-scrollbar-thumb {
background: #506767;
border-radius: 10px;
width: 3px;
}
.tp-process-7-list-wrap::-webkit-scrollbar-thumb:hover {
background: #555;
border-radius: 10px;
width: 3px;
}
@media (max-width: 574.98px) {
.tp-process-7-icon {
flex-direction: column;
}
.tp-process-7-icon span {
margin-bottom: 20px;
}
}
.tp-process-8-icon {
width: 100px;
height: 100px;
display: inline-block;
border-radius: 100px;
line-height: 95px;
transition: all 0.4s ease;
position: relative;
}
.tp-process-8-icon::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
border: 2px solid var(--tp-grey-1);
top: 0;
left: 0;
-webkit-animation: rotate-infinite 15s linear infinite;
animation: rotate-infinite 15s linear infinite;
z-index: 2;
border-radius: 100px;
}
.tp-process-8-number {
font-weight: 600;
font-size: 16px;
letter-spacing: -0.02em;
color: var(--tp-common-white);
border-radius: 100%;
background: var(--tp-theme-primary);
width: 38px;
height: 38px;
display: inline-block;
line-height: 30px;
position: absolute;
top: -4px;
right: -4px;
border: 4px solid var(--tp-common-white);
z-index: 3;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-8-item p br {
display: none;
}
}
.tp-process-8-item:hover .tp-process-8-icon::before {
opacity: 1;
border: 2px dashed var(--tp-grey-1);
}
.tp-process-8-angle {
position: absolute;
right: -29px;
top: 30px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-process-8-angle {
display: none;
}
}
/*----------------------------------------*/
/* 7.14 join start
/*----------------------------------------*/
.tp-join-list {
border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.tp-join-list ul {
display: flex;
flex-wrap: wrap;
}
.tp-join-list ul li {
font-family: var(--font-family);
font-weight: 400;
font-size: 16px;
line-height: 187%;
color: var(--tp-grey-3);
margin-bottom: 10px;
list-style: none;
}
.tp-join-list ul li:not(:last-child) {
margin-right: 40px;
}
.tp-join-list ul li i {
background: rgba(255, 255, 255, 0.15);
width: 20px;
height: 20px;
border-radius: 30px;
font-size: 12px;
text-align: center;
line-height: 20px;
margin-right: 4px;
}
.tp-join-thumb {
padding: 364px 110px 62px 130px;
border-radius: 0px 4px 4px 0px;
}
@media only screen and (min-width: 1400px) and (max-width: 1599px),
only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-thumb {
padding: 264px 30px 62px 30px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-thumb {
margin-right: 0;
}
}
@media (max-width: 574.98px) {
.tp-join-thumb {
padding: 54px 30px 62px 30px;
}
}
.tp-join-form-wrap {
margin-right: 170px;
margin-left: 65px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-form-wrap {
margin-right: 15px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.tp-join-form-wrap {
margin-left: 0;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-form-wrap {
margin-left: 15px;
}
}
.tp-join-form-wrap .tp-input {
width: 100%;
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-2);
background: none;
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 4px;
height: 60px;
padding-left: 30px;
}
.tp-join-form-wrap .tp-input::placeholder {
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-2);
}
.tp-join-form-wrap .tp-input:focus {
border-color: var(--tp-theme-primary);
}
.tp-join-form-wrap .tp-textarea {
height: 164px;
}
.tp-join-4-item {
padding: 58px 60px 37px 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-4-item {
padding: 28px 30px 27px 30px;
}
}
.tp-join-4-icon .icon {
width: 100px;
height: 100px;
line-height: 100px;
}
.tp-join-4-icon .icon-2 {
width: 48px;
height: 48px;
line-height: 44px;
border: 1px solid rgba(31, 49, 48, 0.1);
color: var(--tp-theme-primary);
}
.tp-join-4-icon .icon-2:hover {
background: var(--tp-theme-primary);
color: var(--tp-common-white);
}
.tp-join-4-form {
margin-left: 0;
margin-right: 0;
padding: 55px 60px 60px 60px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-4-form {
padding: 28px 30px 27px 30px;
}
}
.tp-join-4-form .tp-input {
height: 42px;
line-height: 42px;
font-size: 14px;
padding-left: 24px;
}
.tp-join-4-form .tp-input::placeholder {
font-size: 14px;
color: #354c4c;
}
.tp-join-4-form .nice-select::after {
right: 24px;
}
.tp-join-5-form-wrap {
margin-right: 0;
margin-left: 55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-5-form-wrap {
margin-left: 0;
}
}
.tp-join-5-thumb {
position: absolute;
top: 0;
left: 0;
width: 47%;
height: 100%;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-5-thumb {
position: inherit;
width: 100%;
}
}
.tp-join-5-thumb img {
object-fit: cover;
}
.tp-join-6-form {
padding: 58px 60px 37px 60px;
margin-left: -54px;
margin-right: 0;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-6-form p br {
display: none;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-6-form {
padding: 28px 30px 27px 30px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-6-form {
margin-left: 0;
}
}
.tp-join-6-form .tp-input {
height: 52px;
}
.tp-join-6-form .tp-textarea {
height: 120px;
}
.tp-join-details-list {
left: auto;
right: 0;
width: 41%;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-details-list {
position: inherit;
width: 100%;
margin-top: 30px;
}
}
.tp-join-details-form {
margin-left: 0;
margin-right: 55px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-join-details-form {
margin-right: 0;
}
}
/*----------------------------------------*/
/* 7.15 policy start
/*----------------------------------------*/
.tp-policy-4-wrap {
padding: 80px 80px 50px 80px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-policy-4-wrap {
padding: 20px 20px 0px 20px;
}
}
.tp-policy-4-icon {
display: inline-block;
border-radius: 4px;
width: 80px;
height: 80px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.tp-policy-4-title span {
margin-top: 10px;
margin-right: 3px;
}
.tp-policy-4-item {
padding: 40px 40px 110px 40px;
}
.tp-policy-4-item-two {
border-radius: 4px;
}
.tp-policy-4-item-two:hover .tp-policy-4-thumb img {
transform: scale(1.05);
}
.tp-policy-4-shape {
bottom: 0;
right: 0;
mix-blend-mode: luminosity;
}
.tp-policy-4-thumb {
border-radius: 4px 4px 0 0;
}
.tp-policy-4-thumb img {
border-radius: 4px 4px 0 0;
transition: all 0.4s ease;
}
.tp-policy-4-content-two {
padding: 36px 20px 40px 30px;
}
/*----------------------------------------*/
/* 7.8 cta start
/*----------------------------------------*/
.tp-cta-6-call .icon {
border: 1px solid rgba(31, 49, 48, 0.1);
display: inline-block;
width: 52px;
height: 52px;
text-align: center;
line-height: 52px;
border-radius: 50%;
}
.tp-cta-6-call a {
font-weight: 500;
font-size: 16px;
color: var(--tp-theme-primary);
}
.tp-cta-6-btn {
flex-wrap: wrap;
}
@media (max-width: 574.98px) {
.tp-cta-3-title-wrap {
margin-right: 0;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1399px),
only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-cta-3-title-wrap p br {
display: none;
}
}
/*----------------------------------------*/
/* 7.6 contact start
/*----------------------------------------*/
.tp-contact-7-wrap {
padding: 76px 80px 55px 80px;
backdrop-filter: blur(20px);
border-radius: 4px;
background: linear-gradient(209deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.21) 100%);
}
@media (max-width: 574.98px) {
.tp-contact-7-wrap {
padding: 30px 30px 30px 30px;
}
}
.tp-contact-7-form .tp-input {
background: none;
border: none;
border-bottom: 1px solid #506767;
border-radius: 0;
color: var(--tp-grey-2);
padding: 3px 0px;
height: 40px;
}
.tp-contact-7-form .tp-input::placeholder {
font-size: 16px;
color: var(--tp-grey-2);
}
.tp-contact-7-form .tp-input.textarea {
height: 110px;
resize: none;
}
.tp-contact-tag a {
font-weight: 400;
font-size: 16px;
letter-spacing: -0.02em;
color: var(--tp-theme-primary);
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 4px;
padding: 2px 16px;
display: inline-block;
margin-bottom: 8px;
margin-right: 4px;
}
.tp-contact-tag a:hover {
background: var(--tp-theme-primary);
border-color: var(--tp-theme-primary);
color: var(--tp-common-white);
}
.tp-contact-main-icon {
min-width: 50px;
height: 50px;
background: var(--tp-common-white);
display: inline-block;
text-align: center;
line-height: 50px;
border-radius: 100px;
}
.tp-contact-main-icon i {
color: var(--tp-theme-primary);
}
.tp-contact-office-email {
width: 244px;
border-top: 2px solid rgba(255, 255, 255, 0.2);
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
padding: 9px 0px;
padding-left: 20px;
}
.tp-contact-slider-thumb {
z-index: 1;
padding-top: 400px;
padding-left: 60px;
padding-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-contact-slider-thumb {
padding-top: 200px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-contact-slider-thumb {
padding-left: 30px;
}
}
@media (max-width: 574.98px) {
.tp-contact-slider-thumb {
padding-left: 30px;
padding-bottom: 120px;
}
}
.tp-contact-slider-thumb::before {
position: absolute;
content: "";
width: 100%;
background: linear-gradient(180deg, rgba(31, 49, 48, 0) 0%, #1f3130 100%);
height: 100%;
bottom: 0;
left: 0;
z-index: -1;
border-radius: 4px;
}
.tp-contact-email-border {
background: rgba(255, 255, 255, 0.3);
width: 1px;
height: 20px;
display: inline-block;
margin-left: 17px;
margin-right: 55px;
}
.tp-contact-navigation {
position: absolute;
bottom: 60px;
z-index: 2;
right: 60px;
}
@media (max-width: 574.98px) {
.tp-contact-navigation {
bottom: 30px;
left: 30px;
}
}
.tp-contact-navigation span {
width: 60px;
height: 60px;
text-align: center;
background: var(--tp-common-white);
line-height: 60px;
border-radius: 50%;
display: inline-block;
transition: all 0.4s ease;
}
.tp-contact-navigation span:hover {
background: var(--tp-theme-secondary);
color: var(--tp-common-white);
}
.tp-contact-bottom-social ul li {
list-style: none;
margin-right: 5px;
}
.tp-contact-bottom-social ul li a {
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 20px;
width: 36px;
height: 36px;
display: inline-block;
text-align: center;
line-height: 36px;
}
.tp-contact-inner-wrap {
margin-left: 50px;
margin-right: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-contact-inner-wrap {
margin-left: 0;
}
}
.tp-contact-inner-wrap .tp-input {
background: transparent;
border: 1px solid rgba(31, 49, 48, 0.1);
border-radius: 4px;
}
.tp-contact-inner-wrap .tp-textarea {
height: 164px;
}
.tp-contact-map-box {
line-height: 1;
}
.tp-contact-map-box iframe {
height: 640px;
width: 100%;
filter: saturate(0);
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
.tp-contact-map-box iframe {
height: 500px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-contact-map-box iframe {
height: 300px;
}
}
/*----------------------------------------*/
/* 7.9 error start
/*----------------------------------------*/
.tp-error-title {
font-weight: 800;
font-size: 520px;
letter-spacing: -0.02em;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 85%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0;
line-height: 1;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
.tp-error-title {
font-size: 320px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-error-title {
font-size: 220px;
}
}
@media (max-width: 574.98px) {
.tp-error-title {
font-size: 150px;
}
}
.tp-error-subtitle {
margin-top: -120px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-error-subtitle {
margin-top: -40px;
font-size: 40px;
}
}
.tp-error-bg-wrap {
width: 100%;
height: 100vh;
}
.tp-error-wrap {
padding-top: 135px;
}
.tp-error-copyright-text {
padding-top: 150px;
padding-bottom: 30px;
}
.tp-error-copyright-text p {
font-weight: 500;
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
}
.tp-comeingsoon-title {
font-size: 140px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px) {
.tp-comeingsoon-title {
font-size: 100px;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-comeingsoon-title {
font-size: 80px;
}
}
@media (max-width: 574.98px) {
.tp-comeingsoon-title {
font-size: 40px;
line-height: 1;
margin-bottom: 20px;
}
}
.tp-comeingsoon-countdown ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.tp-comeingsoon-countdown ul li {
font-weight: 600;
font-size: 60px;
line-height: 43%;
color: var(--tp-common-white);
border-radius: 4px;
width: 160px;
height: 160px;
backdrop-filter: blur(20px);
background: linear-gradient(209deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 100%);
padding-top: 55px;
margin: 0 10px;
margin-bottom: 15px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-comeingsoon-countdown ul li {
width: 120px;
height: 120px;
padding-top: 45px;
}
}
.tp-comeingsoon-countdown ul li span {
font-weight: 400;
font-size: 16px;
display: block;
margin-top: 15px;
}
.tp-comeingsoon-form input {
border-radius: 26px;
width: 410px;
height: 52px;
background: rgba(255, 255, 255, 0.1);
border: none;
font-weight: 400;
font-size: 14px;
color: var(--tp-grey-3);
padding: 5px 30px;
}
@media (max-width: 574.98px) {
.tp-comeingsoon-form input {
width: 100%;
}
}
.tp-comeingsoon-form input::placeholder {
font-weight: 400;
font-size: 14px;
color: var(--tp-grey-3);
}
.tp-comeingsoon-wrap {
height: 100vh;
width: 100%;
}
.tp-comeingsoon-content {
padding-top: 170px;
padding-bottom: 70px;
}
@media only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.tp-comeingsoon-content {
padding-top: 100px;
}
.tp-comeingsoon-content br {
display: none;
}
}
/*# sourceMappingURL=main.css.map */
.tp-about-area {
padding: 70px 0 0;
}
.purecounter {
color: #00499b;
}
.notice-marquee {
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
color: white;
/* padding: 8px 0; */
position: relative;
overflow: hidden;
/* box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border-bottom: 2px solid rgba(255,255,255,0.2); */
}
.marquee-container {
display: flex;
align-items: center;
white-space: nowrap;
animation: scroll 30s linear infinite;
}
.marquee-content {
display: inline-flex;
align-items: center;
gap: 40px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.5px;
}
.notice-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 20px;
}
.notice-icon {
width: 16px;
height: 16px;
fill: currentColor;
flex-shrink: 0;
}
.notice-text {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.notice-link {
color: #ffd700;
text-decoration: none;
font-weight: 600;
transition: color 0.3s ease;
}
.notice-link:hover {
color: #ffed4a;
text-decoration: underline;
}
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* Pause animation on hover */
.notice-marquee:hover .marquee-container {
animation-play-state: paused;
}
/* Control buttons */
.marquee-controls {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 5px;
}
.control-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.control-btn svg {
width: 12px;
height: 12px;
fill: currentColor;
}
/* Responsive design */
@media (max-width: 768px) {
.marquee-content {
font-size: 13px;
gap: 30px;
}
.notice-item {
padding: 0 15px;
}
.brand-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
}
.grid-two-column {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* 2 equal columns */
gap: 0px 15px;
/* row gap, column gap */
list-style: none;
padding: 0;
margin: 0;
}
.brand-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
border-top: 1px solid rgba(31, 49, 48, 0.1);
border-left: 1px solid rgba(31, 49, 48, 0.1);
}
.brand-logos li {
list-style: none;
border-right: 1px solid rgba(31, 49, 48, 0.1);
border-bottom: 1px solid rgba(31, 49, 48, 0.1);
box-sizing: border-box;
/* display: flex; */
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
/* keeps them square */
}
.brand-logos img {
/* max-width: 80%; */
height: auto;
display: block;
}
.jobs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 24px;
margin-bottom: 60px;
}
.job-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 28px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.job-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.1);
border-color: var(--tp-theme-primary);
}
.job-badge {
display: inline-block;
padding: 4px 12px;
background: #eff6ff;
color: #1d4ed8;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 16px;
}
.job-title {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 12px;
line-height: 1.4;
}
.job-location {
color: #64748b;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 16px;
}
.location-icon {
width: 16px;
height: 16px;
background: var(--tp-theme-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
color: white;
}
.job-location.remote {
color: var(--tp-theme-primary);
}
.job-description {
color: #64748b;
font-size: 14px;
line-height: 1.5;
margin-bottom: 20px;
}
.job-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 24px;
}
.job-tag {
background: #f1f5f9;
border: 1px solid #e2e8f0;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
color: #475569;
font-weight: 500;
}
.apply-btn {
width: 100%;
background: var(--tp-theme-primary);
border: none;
padding: 12px 18px;
border-radius: 8px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
}
@media (max-width: 734px) {
.apply-btn {
width: 67% !important;
background: var(--tp-theme-primary);
border: none;
padding: 11px 18px;
border-radius: 8px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
font-size: 14px;
}
}
.apply-btn:hover {
background: var(--tp-theme-secondary);
transform: translateY(-1px);
color: #fff
}
.apply-btn:active {
transform: translateY(0);
}
.cta-container {
text-align: center;
}
.cta-button {
color: var(--tp-theme-primary);
;
border: none;
padding: 16px 40px;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
/* box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); */
}
.cta-button:hover {
/* background: var); */
text-decoration: underline;
}
.cta-button:active {
transform: translateY(0);
}
@media (max-width: 768px) {
.section-title h1 {
font-size: 2rem;
}
.jobs-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.job-card {
padding: 24px;
}
.tp-about-area {
padding: 0 0px;
}
.pt-70 {
padding-top: 40px;
}
.pb-70 {
padding-bottom: 40px;
}
}
/* Subtle entrance animation */
.job-card {
animation: fadeIn 0.6s ease-out;
}
.job-card:nth-child(1) {
animation-delay: 0.1s;
}
.job-card:nth-child(2) {
animation-delay: 0.15s;
}
.job-card:nth-child(3) {
animation-delay: 0.2s;
}
.job-card:nth-child(4) {
animation-delay: 0.25s;
}
.job-card:nth-child(5) {
animation-delay: 0.3s;
}
.job-card:nth-child(6) {
animation-delay: 0.35s;
}
.job-card:nth-child(7) {
animation-delay: 0.4s;
}
.job-card:nth-child(8) {
animation-delay: 0.45s;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.contact-section {
max-width: 1400px;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 24px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
border: 1px solid #00489b6b
}
.contact-info {
background: var(--tp-grey-3);
position: relative;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.contact-info::before {
/* content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle at 30% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
animation: float 20s ease-in-out infinite; */
}
@keyframes float {
0%,
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
50% {
transform: translate(-50%, -50%) rotate(180deg);
}
}
.contact-content {
position: relative;
z-index: 2;
}
.contact-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
color: black;
padding: 8px 20px;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 30px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.contact-title {
font-size: 3rem;
font-weight: 800;
color: #00499b;
margin-bottom: 20px;
letter-spacing: -0.02em;
line-height: 1.1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.contact-subtitle {
font-size: 1.1rem;
color: rgba(0, 0, 0, 0.9);
margin-bottom: 40px;
line-height: 1.6;
font-weight: 300;
}
.contact-item {
background: rgb(156 194 235 / 12%);
border: 1px solid rgb(0 73 155 / 13%);
border-radius: 16px;
padding: 24px;
margin-bottom: 20px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.contact-item:hover::before {
left: 100%;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.contact-item-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
text-align: left;
}
.contact-icon {
width: 50px;
height: 50px;
padding: 8px;
background: rgba(255, 255, 255, 0.315);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}
.contact-icon svg {
width: 30px;
height: 30px;
stroke: #00499b;
}
.contact-item-label {
color: rgba(0, 0, 0, 0.8);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-item-value {
color: black;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.4;
}
.contact-email-section {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.email-label {
color: black;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 1px;
text-transform: uppercase;
}
.email-border {
flex: 1;
height: 2px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent);
border-radius: 2px;
}
.map-container {
position: relative;
background: #f8f9fa;
overflow: hidden;
height: 100%;
}
.map-iframe {
width: 100%;
height: 100%;
border: none;
filter: grayscale(30%) contrast(1.1);
transition: filter 0.3s ease;
}
.map-iframe:hover {
filter: grayscale(0%) contrast(1.2);
}
.map-overlay {
position: absolute;
top: 30px;
right: 30px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
max-width: 280px;
transform: translateY(0);
transition: transform 0.3s ease;
}
.map-overlay:hover {
transform: translateY(-4px);
}
.map-overlay-title {
font-size: 1.1rem;
font-weight: 700;
color: #333;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.map-overlay-title::before {
content: '';
width: 8px;
height: 8px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 50%;
}
.map-overlay-address {
font-size: 0.9rem;
color: #666;
line-height: 1.5;
margin-bottom: 12px;
}
.map-overlay-action {
display: inline-flex;
align-items: center;
gap: 6px;
color: #667eea;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
}
.map-overlay-action:hover {
color: #764ba2;
}
.map-overlay-action svg {
width: 14px;
height: 14px;
}
/* Responsive Design */
@media (max-width: 768px) {
body {
/* padding: 20px 10px; */
}
.contact-container {
grid-template-columns: 1fr;
}
.contact-info {
padding: 40px 30px;
text-align: center;
}
.contact-title {
font-size: 2.5rem;
}
.map-container {
min-height: 400px;
}
.map-overlay {
top: 20px;
right: 20px;
left: 20px;
max-width: none;
}
}
.section-title {
font-size: 1.3rem;
font-weight: 600;
color: #00499b;
margin-top: 40px;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #b8b8b8;
}
@media (max-width: 480px) {
.contact-info {
padding: 30px 20px;
}
.contact-title {
font-size: 2rem;
}
.contact-item {
padding: 20px;
}
}
.form-group {
display: flex;
flex-direction: column;
width: 100%;
margin: 10px 0;
}
label {
font-weight: 500;
color: #495057;
margin-bottom: 6px;
font-size: 0.9rem;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
padding: 12px 15px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
background-color: #f8f9fa;
transition: all 0.2s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
outline: none;
border-color: #80bdff;
background-color: #fff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
textarea {
resize: vertical;
min-height: 80px;
}
.photo-upload {
border: 2px dashed #ced4da;
border-radius: 4px;
padding: 20px;
text-align: center;
background-color: #f8f9fa;
transition: all 0.2s ease;
}
.photo-upload:hover {
border-color: #80bdff;
background-color: #fff;
}
.photo-upload input[type="file"] {
display: none;
}
.photo-upload label {
cursor: pointer;
font-weight: 500;
color: #007bff;
margin: 0;
}
.photo-upload .photo-text {
margin-top: 10px;
font-size: 0.9rem;
color: #6c757d;
}
.declaration-box {
background-color: #f8f9fa;
border: 1px solid #e9ecef;
border-radius: 4px;
padding: 20px;
margin-bottom: 20px;
}
.declaration-text {
font-size: 0.9rem;
color: #495057;
margin-bottom: 15px;
}
.auto-date {
font-size: 0.9rem;
color: #6c757d;
margin-bottom: 15px;
}
.instructions {
background-color: #e7f3ff;
border-left: 4px solid #007bff;
padding: 15px;
margin-bottom: 20px;
}
.instructions h3 {
color: #007bff;
margin-bottom: 10px;
font-size: 1rem;
}
.instructions ul {
margin-left: 20px;
}
.instructions li {
margin-bottom: 5px;
color: #495057;
}
.job-table-container {
overflow-x: auto;
margin-bottom: 20px;
border: 1px solid #e9ecef;
border-radius: 4px;
}
.job-table {
width: 100%;
min-width: 700px;
border-collapse: collapse;
background: white;
}
.job-table th {
background-color: #f8f9fa;
color: #495057;
padding: 12px 8px;
text-align: left;
font-weight: 600;
font-size: 0.9rem;
border-bottom: 1px solid #e9ecef;
white-space: nowrap;
}
.job-table td {
padding: 12px 8px;
border-bottom: 1px solid #e9ecef;
vertical-align: top;
}
.job-table tr:last-child td {
border-bottom: none;
}
.job-table input,
.job-table textarea,
.job-table select {
width: 100%;
border: 1px solid #ced4da;
padding: 8px 12px;
border-radius: 4px;
font-size: 0.9rem;
background-color: #f8f9fa;
min-width: 120px;
}
.job-table input:focus,
.job-table textarea:focus,
.job-table select:focus {
background-color: #fff;
border-color: #80bdff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.job-table textarea {
min-height: 60px;
resize: vertical;
}
.job-table select {
height: 40px;
}
.checkbox-grid {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 20px;
}
.checkbox-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
min-width: 200px;
}
.checkbox-item input[type="checkbox"] {
width: 16px;
height: 16px;
padding: 0;
border-radius: 0;
}
.checkbox-item label {
margin: 0;
font-weight: 400;
cursor: pointer;
}
.radio-group {
display: flex;
gap: 25px;
flex-wrap: wrap;
}
.radio-item {
display: flex;
align-items: center;
gap: 8px;
}
.radio-item input[type="radio"] {
width: 16px;
height: 16px;
padding: 0;
border-radius: 50%;
}
.radio-item label {
margin: 0;
font-weight: 400;
cursor: pointer;
}
.submit-section {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #e9ecef;
}
.submit-btn {
background-color: #00499b;
color: white;
padding: 12px 30px;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
}
.submit-btn:hover {
background-color: #00499b;
}
@media (max-width: 768px) {
.job-table {
font-size: 0.8rem;
}
.job-table th,
.job-table td {
padding: 8px 6px;
}
.checkbox-grid {
flex-direction: column;
}
.radio-group {
flex-direction: column;
gap: 12px;
}
}
.download-card {
background: white;
border-radius: 16px;
padding: 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.download-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.3);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.pdf-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #00499b, #2563eb);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: bold;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.date-badge {
background: rgba(59, 130, 246, 0.1);
color: #00499b;
padding: 5px 8px;
border-radius: 10px;
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(59, 130, 246, 0.2);
}
.title {
color: #1f2937;
font-size: 20px;
font-weight: 600;
margin-bottom: 25px;
line-height: 1.3;
}
.download-btn {
background: linear-gradient(135deg, #00499b, #2563eb);
color: white;
border: none;
padding: 14px 28px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
text-decoration: none;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.download-icon {
width: 18px;
height: 18px;
fill: currentColor;
transition: transform 0.3s ease;
}
.download-btn:hover .download-icon {
transform: translateY(2px);
}
.sn-watermark {
position: absolute;
bottom: 15px;
right: 15px;
font-size: 70px;
font-weight: 900;
color: rgba(137, 173, 231, 0.233);
pointer-events: none;
font-family: 'Arial Black', sans-serif;
letter-spacing: -2px;
user-select: none;
}
@media (max-width: 768px) {
.download-card {
padding: 25px;
}
.title {
font-size: 18px;
}
.pdf-icon {
width: 45px;
height: 45px;
font-size: 16px;
}
.sn-watermark {
font-size: 36px;
bottom: 10px;
right: 10px;
}
}
@media (max-width: 480px) {
.download-card {
padding: 20px;
}
.download-btn {
padding: 12px 24px;
font-size: 14px;
}
.title {
font-size: 16px;
}
.sn-watermark {
font-size: 32px;
}
}
.popup-gallery {
display: flex;
flex-wrap: wrap;
}
.popup-gallery img {
padding: 15px;
height: 350px;
}
.popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.popup-inner {
background: #fff;
padding: 30px;
max-width: 500px;
width: 90%;
border-radius: 8px;
text-align: center;
position: relative;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.popup-close {
position: absolute;
top: 10px;
right: 15px;
font-size: 18px;
font-weight: bold;
color: #333;
cursor: pointer;
}
.popup-btn {
display: inline-block;
margin-top: 20px;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.popup-content p {
text-align: justify;
}
.popup-content h4 {
text-align: center;
font-size: 22px;
margin-bottom: 10px;
}
.popup-btn:hover {
background-color: #0056b3;
}
/* Match content column height */
.row.align-items-stretch {
display: flex;
align-items: stretch;
}
/* Ensure the image fills the height of the wrapper */
.image img {
object-fit: cover;
height: 100%;
width: 100%;
}
.image-info {
padding: 15px;
background: var(--tp-common-white-2);
border-radius: 0 0 20px 20px;
}
.image-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 8px;
color: #333;
}
.publish-date {
font-size: 14px;
color: #666;
font-style: italic;
}
.demand {
border: 1px solid #b1b1b1;
border-radius: 15px;
margin: 10px;
}
.workforce-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1px;
background: #e9ecef;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border-radius: 20px;
}
.skill-category {
background: white;
transition: box-shadow 0.2s ease;
}
.skill-category:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.category-header {
padding: 20px 25px;
border-top: 3px solid #dc2626;
background: #fee2e2;
}
.semi-skilled .category-header {
background: #fef3c7;
border-top: 3px solid #dc2626;
}
.skilled .category-header {
background: #d1fae5;
border-top: 3px solid #059669;
}
.professional .category-header {
background: #e0e7ff;
border-top: 3px solid #4338ca;
}
.category-title {
font-size: 1.2em;
font-weight: 600;
color: #000;
margin-bottom: 4px;
}
.category-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.75em;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.unskilled .category-badge {
background: #fff;
color: #dc2626;
}
.semi-skilled .category-badge {
background: #fff;
color: #d97706;
}
.skilled .category-badge {
background: #fff;
color: #059669;
}
.professional .category-badge {
background: #fff;
color: #4338ca;
}
.skill-category ul {
list-style: none;
padding: 0;
}
.skill-category ul li {
padding: 16px 25px 16px 50px;
border-bottom: 1px solid #f8f9fa;
transition: all 0.2s ease;
cursor: pointer;
position: relative;
}
.skill-category ul li:last-child {
border-bottom: none;
}
.skill-category ul li:hover {
background: #f8f9fa;
border-left: 3px solid #dee2e6;
}
.unskilled li::before {
content: "\f0c0";
font-family: "Font Awesome 6 Pro";
font-weight: 900;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1.1em;
color: #dc2626;
}
.semi-skilled li::before {
content: "\f6e3";
font-family: "Font Awesome 6 Pro";
font-weight: 900;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1.1em;
color: #d97706;
}
.skilled li::before {
content: "\f0ad";
font-family: "Font Awesome 6 Pro";
font-weight: 900;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1.1em;
color: #059669;
}
.professional li::before {
content: "\f0f2";
font-family: "Font Awesome 6 Pro";
font-weight: 900;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1.1em;
color: #4338ca;
}
.unskilled li:hover {
border-left-color: #dc2626;
}
.semi-skilled li:hover {
border-left-color: #d97706;
}
.skilled li:hover {
border-left-color: #059669;
}
.professional li:hover {
border-left-color: #4338ca;
}
.job-name {
font-weight: 500;
color: #374151;
font-size: 1em;
margin-bottom: 2px;
}
.job-specialties {
color: #9ca3af;
font-size: 0.85em;
font-style: italic;
}
.stats-section {
background: #f8f9fa;
padding: 25px;
border-bottom: 1px solid #e9ecef;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
max-width: 600px;
margin: 0 auto;
}
.stat-item {
text-align: center;
padding: 15px;
background: white;
border-radius: 6px;
border: 1px solid #e9ecef;
}
.stat-number {
font-size: 1.8em;
font-weight: 600;
color: #495057;
margin-bottom: 4px;
}
.stat-label {
color: #6c757d;
font-size: 0.9em;
}
/* Responsive Design */
@media (max-width: 768px) {
.workforce-grid {
grid-template-columns: 1fr;
gap: 8px;
}
.header {
padding: 30px 20px;
}
.header h1 {
font-size: 1.8em;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.skill-category ul li {
padding: 14px 20px 14px 45px;
}
}
@media (max-width: 480px) {
.header {
padding: 25px 20px;
}
.header h1 {
font-size: 1.6em;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.skill-category ul li {
padding: 12px 20px 12px 45px;
}
.category-header {
padding: 18px 20px;
}
}
.offices-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 32px;
padding: 60px 0;
}
.office-card {
background: white;
border-radius: 12px;
padding: 32px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
border: 1px solid #f0f0f0;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
margin-bottom: 40px;
}
.office-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #00499b, #1d4ed8);
}
.office-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.office-header {
margin-bottom: 24px;
}
.office-title {
font-size: 1.4rem;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 8px;
}
.office-type {
font-size: 0.9rem;
color: #00499b;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.contact-section-branch {
margin-bottom: 20px;
}
.contact-row {
display: flex;
/* align-items: flex-start; */
align-items: center;
margin-bottom: 12px;
}
.contact-icon-branch {
width: 30px;
height: 30px;
margin-right: 12px;
margin-top: 2px;
opacity: 0.7;
}
.contact-info-branch {
flex: 1;
}
.contact-label {
font-size: 0.85rem;
color: #666;
font-weight: 500;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.contact-value {
font-size: 1rem;
color: #1a1a1a;
line-height: 1.5;
}
.contact-value a {
/* color: #00499b; */
text-decoration: none;
transition: color 0.2s ease;
}
.contact-value a:hover {
color: #1d4ed8;
}
.office-actions {
display: flex;
gap: 12px;
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #f0f0f0;
}
.action-btn {
flex: 1;
padding: 12px 16px;
border: 1px solid #e5e7eb;
background: white;
color: #374151;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.action-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
}
.action-btn.primary {
background: #00499b;
color: white;
border-color: #00499b;
}
.action-btn.primary:hover {
background: #2563eb;
border-color: #2563eb;
}
@media (max-width: 768px) {
.offices-grid {
grid-template-columns: 1fr;
padding: 40px 0;
}
.office-card {
padding: 24px;
}
.action-btn {
font-size: 0.85rem;
padding: 10px 12px;
}
}
.tp-about-content p {
margin-bottom: 30px !important;
}
.tp-chose-list li::before {
content: "\f00c";
font-family: "Font Awesome 6 Pro";
font-weight: 900;
color: #00499b;
margin-right: 8px;
display: inline-block;
}
.tp-chose-content li::before {
content: "\f00c";
font-family: 'Font Awesome 6 Pro';
font-weight: 900;
color: #00499b;
margin-right: 8px;
display: inline-block;
}
/* google translate */
#google_translate_element {
position: fixed;
top: 10px;
right: 10px;
z-index: 9999;
background: #fff;
padding: 5px 10px;
border-radius: 6px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
font-size: 14px;
}
.goog-te-gadget img {
display: none;
/* Hide Google branding flag icon */
}
.workforcee li {
font-weight: 500;
color: rgb(55, 65, 81);
font-size: 1em;
margin-bottom: 2px;
}
.single-post-content li {
list-style: none;
font-weight: 400;
font-size: 16px;
color: var(--tp-grey-1);
display: flex;
align-items: center;
margin-bottom: 10px;
}
.single-post-content li::before {
content: "\f00c";
font-family: 'Font Awesome 6 Pro';
font-weight: 900;
color: #898181;
margin-right: 8px;
display: inline-block;
}
.single-post-title:hover {
color: black !important;
}
.preview_image {
position: absolute;
top: -11px;
right: 43%;
background: red;
color: white;
border-radius: 50%;
padding: 0px 6px;
cursor: pointer;
}
@media only screen and (min-width: 992px) and (max-width: 1199px),
only screen and (min-width: 768px) and (max-width: 991px),
only screen and (min-width: 576px) and (max-width: 767px),
(max-width: 574.98px) {
.preview_image {
position: absolute;
top: -11px;
right: 26%;
}
}
.tp-industry-content:hover .tp-industry-icon img {
filter: brightness(0) invert(1) !important;
}
.jobb-description p {
font-size: 17px;
text-align: center;
}
.nep-info a {
color: blue;
}
/* tab css */
.tp-brands-area {
position: relative;
overflow: hidden;
}
.main-content {
display: flex;
padding: 0;
height: 600px;
align-items: center;
position: relative;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
border-radius: 20px
}
.tabs-container {
width: 280px;
background: #fafbfc;
border-right: 1px solid #e9ecef;
position: sticky;
padding: 30px 0px;
top: 0;
height: 600px;
}
.tab {
display: block;
width: 100%;
padding: 16px 24px;
background: none;
border: none;
color: #495057;
text-align: left;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid #f1f3f4;
}
.tab:hover {
background: #f1f8ff;
color: #00499B;
}
.tab.active {
background: #e3f2fd;
color: #00499B;
border-left: 3px solid #188DA1;
}
.content-container {
flex: 1;
padding: 30px 30px;
background: white;
height: 600px;
/* overflow-y: auto; */
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.country-title {
font-size: 35px;
color: #00499B;
margin-bottom: 20px;
font-weight: 500;
}
.company-count {
background: #e8f4f8;
color: #188DA1;
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
display: inline-block;
margin-bottom: 24px;
}
.tab-content ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
overflow-y: auto;
gap: 12px;
max-height: 500px;
counter-reset: company-counter;
}
.tab-content ul li {
background: white;
border: 1px solid #f1f3f4;
border-radius: 4px;
padding: 20px 0 20px 50px;
transition: all 0.2s ease;
counter-increment: company-counter;
font-size: 16px;
font-weight: 500;
color: #212529;
line-height: 1.3;
position: relative;
}
.tab-content ul li::before {
content: counter(company-counter);
background: #00499B;
color: white;
width: 28px;
height: 28px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 13px;
position: absolute;
top: 16px;
left: 16px;
}
.tab-content ul li:hover {
background: #f8fbff;
border-color: #188DA1;
}
.no-companies {
text-align: center;
color: #6c757d;
padding: 60px 20px;
font-size: 15px;
}
@media (max-width: 768px) {
.main-content {
flex-direction: column;
height: auto;
}
.tabs-container {
width: 100%;
height: auto;
position: sticky;
top: 0;
z-index: 10;
padding: 0;
display: flex;
overflow-x: auto;
background: #fafbfc;
border-right: none;
border-bottom: 1px solid #e9ecef;
}
.content-container {
height: 500px;
padding: 20px;
}
.tab {
width: 100%;
white-space: nowrap;
text-align: center;
border-bottom: none;
border-right: 1px solid #f1f3f4;
font-size: 16px;
padding: 14px 16px;
}
.tab.active {
border-left: none;
border-top: 3px solid #188DA1;
}
.tab-content ul {
grid-template-columns: 1fr;
gap: 8px;
height: 330px;
}
}
/* Subtle scrollbar styling */
.tabs-container::-webkit-scrollbar {
height: 4px;
}
.tabs-container::-webkit-scrollbar-track {
background: #f1f3f4;
}
.tabs-container::-webkit-scrollbar-thumb {
background: var(--tp-theme-primary);
border-radius: 2px;
}
.content-container .tab-content ul::-webkit-scrollbar {
width: 4px;
}
.content-container .tab-content ul::-webkit-scrollbar-track {
background: #f1f3f4;
}
.content-container .tab-content ul::-webkit-scrollbar-thumb {
background: var(--tp-theme-primary);
border-radius: 2px;
}
/* Heading Styles */
.content-wrapper h1 {
color: #000000;
font-size: 38px;
font-weight: 700;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 3px solid #188DA1;
}
.content-wrapper h2 {
color: #00499B;
font-size: 2.1em;
font-weight: 600;
margin: 40px 0 20px 0;
}
.content-wrapper h3 {
color: #00499B;
font-size: 1.8em;
font-weight: 600;
margin: 32px 0 16px 0;
position: relative;
}
.content-wrapper h4 {
color: #00499B;
font-size: 1.5em;
font-weight: 600;
margin: 28px 0 14px 0;
letter-spacing: 0.5px;
}
.content-wrapper h5 {
color: #00499B;
font-size: 1.3em;
font-weight: 500;
margin: 24px 0 12px 0;
}
.content-wrapper h6 {
color: #00499B;
font-size: 1.1em;
font-weight: 500;
margin: 20px 0 10px 0;
}
/* Paragraph Styles */
.content-wrapper p {
font-size: 18px;
color: #212529;
font-weight: 400;
line-height: 1.5;
margin-bottom: 20px;
text-align: justify;
}
/* Unordered List Styles */
.content-wrapper ul {
margin: 20px 0;
padding-left: 0;
list-style: none;
}
.content-wrapper ul li {
color: #495057;
font-size: 16px;
margin-bottom: 12px;
padding-left: 30px;
position: relative;
line-height: 1.6;
}
.content-wrapper ul li::before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 8px;
height: 8px;
background: #188DA1;
border-radius: 50%;
}
.content-wrapper ul li:hover {
color: #00499B;
transform: translateX(5px);
transition: all 0.2s ease;
}
/* Nested UL styles */
.content-wrapper ul ul {
margin: 8px 0;
padding-left: 20px;
}
.content-wrapper ul ul li::before {
background: transparent;
border: 2px solid #188DA1;
}
/* Ordered List Styles */
.content-wrapper ol {
margin: 20px 0;
padding-left: 0;
list-style: none;
counter-reset: ordered-counter;
}
.content-wrapper ol li {
color: #495057;
font-size: 16px;
margin-bottom: 12px;
padding-left: 40px;
position: relative;
line-height: 1.6;
counter-increment: ordered-counter;
}
.content-wrapper ol li::before {
content: counter(ordered-counter);
position: absolute;
left: 0;
top: 0;
background: #00499B;
color: white;
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
}
.content-wrapper ol li:hover {
color: #00499B;
transform: translateX(5px);
transition: all 0.2s ease;
}
/* Nested OL styles */
.content-wrapper ol ol {
margin: 8px 0;
padding-left: 30px;
counter-reset: nested-counter;
}
.content-wrapper ol ol li {
counter-increment: nested-counter;
}
.content-wrapper ol ol li::before {
content: counter(ordered-counter) "." counter(nested-counter);
background: #188DA1;
width: 35px;
font-size: 12px;
}
/* Responsive Design */
@media (max-width: 768px) {
.content-wrapper {
/* padding: 30px 20px; */
}
.content-wrapper h1 {
font-size: 30px;
}
.content-wrapper h2 {
font-size: 1.4em;
margin: 30px 0 16px 0;
padding-left: 15px;
}
.content-wrapper h3 {
font-size: 1.2em;
}
.content-wrapper h3::before {
left: -15px;
width: 6px;
height: 6px;
}
.content-wrapper ul li,
.content-wrapper ol li {
font-size: 15px;
}
.content-wrapper ol li {
padding-left: 35px;
}
.content-wrapper ol li::before {
width: 24px;
height: 24px;
font-size: 13px;
}
}
.top-phone:hover {
color: #ffffff !important;
}
@media (max-width: 768px) {
.tp-header-top-lang-list {
left: -45px;
z-index: 999;
}
.tp-header-top-right {
justify-content: space-between;
}
}
/* select */
.select-container {
width: 100%;
}
@media ( max-width: 769px ){
.select-container {
width: 100%;
}
}
@media (max-width: 768px) {
.select-container {
width: 100%;
}
}
select[data-multi-select-plugin] {
display: none !important;
}
.multi-select-component {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: auto;
width: 100%;
line-height: 1.42857143;
padding-bottom: 0px;
color: #555;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
padding: 10px 15px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
background-color: #f8f9fa;
transition: all 0.2s ease;
}
.autocomplete-list {
border-radius: 4px 0px 0px 4px;
}
.multi-select-component:focus-within {
box-shadow: inset 0px 0px 0px 2px #78ABFE;
}
.multi-select-component .btn-group {
display: none !important;
}
.multiselect-native-select .multiselect-container {
width: 100%;
}
.selected-wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
display: inline-block;
border: 1px solid #d9d9d9;
background-color: #ededed;
white-space: nowrap;
margin: 1px 5px 5px 0;
height: 22px;
vertical-align: top;
cursor: default;
}
.selected-wrapper .selected-label {
max-width: 514px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
padding-left: 4px;
vertical-align: top;
}
.selected-wrapper .selected-close {
display: inline-block;
text-decoration: none;
font-size: 14px;
line-height: 1.49em;
margin-left: 5px;
padding-bottom: 10px;
height: 100%;
vertical-align: top;
padding-right: 4px;
opacity: 0.2;
color: #000;
text-shadow: 0 1px 0 #fff;
font-weight: 700;
}
.search-container {
display: flex;
flex-direction: row;
}
.search-container .selected-input {
background: none;
border: 0;
height: 20px;
width: 60px;
padding: 0;
margin-bottom: 6px;
-webkit-box-shadow: none;
box-shadow: none;
}
.search-container .selected-input:focus {
outline: none;
}
.dropdown-icon.active {
transform: rotateX(180deg)
}
.search-container .dropdown-icon {
display: inline-block;
padding: 10px 5px;
position: absolute;
top: 5px;
right: 5px;
width: 10px;
height: 10px;
border: 0 !important;
/* needed */
-webkit-appearance: none;
-moz-appearance: none;
/* SVG background image */
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Ctitle%3Edown-arrow%3C%2Ftitle%3E%3Cg%20fill%3D%22%23818181%22%3E%3Cpath%20d%3D%22M10.293%2C3.293%2C6%2C7.586%2C1.707%2C3.293A1%2C1%2C0%2C0%2C0%2C.293%2C4.707l5%2C5a1%2C1%2C0%2C0%2C0%2C1.414%2C0l5-5a1%2C1%2C0%2C1%2C0-1.414-1.414Z%22%20fill%3D%22%23818181%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: center;
background-size: 10px;
background-repeat: no-repeat;
}
.search-container ul {
position: absolute;
list-style: none;
padding: 0;
z-index: 3;
margin-top: 29px;
width: 100%;
right: 0px;
background: #fff;
border: 1px solid #ccc;
border-top: none;
border-bottom: none;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.search-container ul :focus {
outline: none;
}
.search-container ul li {
display: block;
text-align: left;
padding: 8px 29px 2px 12px;
border-bottom: 1px solid #ccc;
font-size: 14px;
min-height: 31px;
}
.search-container ul li:first-child {
border-top: 1px solid #ccc;
border-radius: 4px 0px 0 0;
}
.search-container ul li:last-child {
border-radius: 4px 0px 0 0;
}
.search-container ul li:hover.not-cursor {
cursor: default;
}
.search-container ul li:hover {
color: #333;
background-color: rgb(251, 242, 152);
;
border-color: #adadad;
cursor: pointer;
}
/* Adding scrool to select options */
.autocomplete-list {
max-height: 218px;
overflow-y: auto;
}
select.custom-selectt {
padding: 12px 15px;
border: 1px solid #ced4da;
border-radius: 4px;
font-size: 1rem;
background-color: #f8f9fa;
transition: all 0.2s ease;
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* faq */
.faq-contentt ul {
padding-left: 0;
}
.faq-contentt ul li {
list-style: none;
color: #ffffff;
position: relative;
padding-left: 28px;
margin-bottom: 6px;
}
.faq-contentt ul li::before {
content: "\2713";
color: #ffffff;
position: absolute;
left: 2px;
top: 5px;
font-size: 18px;
line-height: 1.2;
}
.faq-contentt h1,
.faq-contentt h2,
.faq-contentt h3,
.faq-contentt h4,
.faq-contentt h5,
.faq-contentt h6 {
color: #ffffff;
}
/* for country */
.country-popup {
position: absolute;
background: white;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: auto;
width: 100%;
display: none;
z-index: 1000;
border-radius: 4px;
}
.country-popup div {
padding: 8px;
cursor: pointer;
}
.country-popup div:hover {
background: #f0f0f0;
}
.job-table textarea::placeholder{
opacity: 0.5;
}
/* desired job title */
.job-checkbox-container {
border: 1px solid #ced4da;
border-radius: 0.375rem;
padding: 25px;
max-height: 200px;
overflow-y: auto;
background-color: white;
}
.job-checkbox-item {
cursor: pointer;
padding: 8px 10px;
margin-bottom: 5px;
transition: background-color 0.2s;
width: 33%;
float: left;
}
@media (max-width: 768px) {
.job-checkbox-item {
width: 100%;
}
}
.job-checkbox-item:last-child {
border-bottom: none;
margin-bottom: 0;
}
.job-checkbox-item:hover {
background-color: #f8f9fa;
}
.form-check-input {
margin-top: 0.3em;
}
.single-job-display {
padding: 8px 12px;
background-color: #f8f9fa;
border-radius: 0.375rem;
display: inline-block;
}
/* Custom scrollbar */
.job-checkbox-container::-webkit-scrollbar {
width: 8px;
}
.job-checkbox-container::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.job-checkbox-container::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.job-checkbox-container::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
.form-check-label{
cursor: pointer;
width: 100%;
}